React library

@advisible/adk-react is a React wrapper for the Advisible Development Kit (ADK). It exposes a container component and a reset hook – ADK configuration, templates and styles remain the responsibility of the host application.

Installation

Install @advisible/adk-react as a dependency of the application that renders ADK containers. React is a peer dependency and must be version 16.8 or later.

npm install @advisible/adk-react

The package entry point is marked as a client module for React Server Component environments.

API

AdkContainer component

type AdkContainer = (props: { id: string }) => React.JSX.Element

Renders an ADK container that automatically keeps container attachment and detachment aligned with the React component lifecycle. All containers on the site should use this component rather than raw div elements.

The id prop must match a container ID declared in the ADK configuration. The component renders an empty div with a data-adk-container attribute set to this ID.

On mount, the component queues an ADK container attachment for its rendered element using adk.container.attach. On unmount, it detaches the element when the ADK container API is available using adk.container.detach.

Using this component will automatically initialize the adk.cmd command queue when needed.

useAdkReset hook

type useAdkReset = (trigger: string) => void

Advisible's default behavior is to not load multiple ads from the same campaign in the same page load. When the user navigates a single page application (SPA), the page is not reloaded. Therefore, we provide a way of resetting the library by supplying a trigger string to the useAdkReset hook.

Include in the trigger any navigation state whose change should simulate a traditional page navigation. The initial trigger value is recorded without resetting ADK. When a later render supplies a different string, the hook updates its stored value and triggers a reset of ADK.

Using this hook will automatically initialize the adk.cmd command queue when needed.