React Component

React Component extension for at.js library exposes a React Component that acts as a container for offers delivered by at.js.

Important notes

1. The current version of the component is to be used only on the client-side.

Prerequisites

1. AT.js library
2. React and React-dom libraries

Integration Instructions

1. Include at.js;
2. Install target-react-component: npm install @adobe/target-react-component --save;
3. In your React app, initialize the Target component like this:

import createTargetComponent from '@adobe/target-react-component';

let Target = createTargetComponent(React);

4. Then include it in your app components' onRender() methods (data-mbox prop is mandatory):

onRender: function () {
  return (
    <div>(...)
      <Target data-mbox="myMboxName">
        Default content.
      </Target>
    (...)</div>
  );
}

5. The content enclosed by the Target component will be hidden initially, and later will be either made visible (in case of an issue with offer fetching/applying) or replaced with fetched Target offers (on successful offer retrieval).

Options

The component can be configured by passing at.js options at app runtime as new component props via the component's element attributes.
This way, new content can be fetched and applied once a parent component updates the Target component's props by passing it new or updated data attributes. For more details, check out the extension README and see the demos in action.

Demos

Simple React Component Example