Package Exports

@infrhq/react
@infrhq/react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@infrhq/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Infr React Components

Infr - API for Better Ads

A set of React components and bindings for the Infr API for displaying ads in your React applications.

Installation

To install the package, you can use either npm or yarn:

npm install @infrhq/react

yarn add @infrhq/react

Usage

Card

Import the InfrAdCard component from @infrhq/react in your application:

import { InfrAdCard } from '@infrhq/react';

You can then use it in your components like this:

<InfrAdCard publicKey={publicKey} backdrop={backdrop} systemMessage={systemMessage} theme={backgroundColor} />

Where:

publicKey - Your Infr API's public key.
backdrop - The backdrop for the ad.
systemMessage - The system message for the ad.
theme - The background color for the ad card. Can be "light", "dark" or any custom color code in hex.

Note: All of the above properties are optional, but you'd typically want to provide at least the publicKey for your Infr API.

Here's a functional example you can use directly:

function App() {
  return (
    <div>
      <InfrAdCard publicKey="test" backdrop="Travel, vacations, hotels"/>
    </div>
  );
}

In this example, an ad card from Infr is displayed with a light background color.

Development

For developing this package:

Clone the repository
Install the dependencies with npm install
Use npm run build to compile the TypeScript/Babel code

Bugs

For any bugs, please raise an issue in the GitHub repository.

License

This package is released under the MIT license. See LICENSE for more details.

Contributing

We welcome contributions! Please see our CONTRIBUTING guide for more details.

Questions

For any questions or suggestions, please use the GitHub issues page.

@infrhq/react