Skip to main content

Setting Up Ingrain React

Overview​

Ingrain React package allows you to add components to your React-based apps (including NextJS apps) easily.

tip

Ingrain React package provides components to display activities in your app. To log activities, you still need to either handle it yourself or use our Ingrain Client SDK.

Installation​

npm i @ingrain/ingrain-react

Usage​

Ingrain requires your application to be wrapped in the <IngrainProvider/> context.

If using Create React App, set REACT_APP_INGRAIN_PUBLISHABLE_KEY to your publishable key in your .env.local file to make the environment variable accessible on process.env and pass it as the publishableKey prop.

You will also need to obtain and pass in your user's JWT. For details on getUserJwtToken, refer to this Client Javascript SDK.

import { render } from 'react-dom';

import { IngrainProvider, UserActivity, EntityActivity  } from '@ingrain/ingrain-react';

const publishableKey = process.env.REACT_APP_INGRAIN_PUBLISHABLE_KEY;

render(
  <IngrainProvider
    theme={{ mode: 'light' }} // or set it to dark mode. You can also customize your colors here.
    opts={{
      publishableKey,
      getUserJwtToken: async () => {
        // Define how you can obtain your user's JWT
      },
    }}
  >
    <App />
  </IngrainProvider>,
  document.getElementById('root'),
);

function App() {
  return (
    <>
      {/* Activity timeline based on user */}
      <UserActivity userId={'user-id-here'}>
      {/* Activity timeline based on entity e.g. access token changes */}
      <EntityActivity entityId={'entity-id-here'}>
    </>
  );
}

Using Components​

Proceed to the next chapters to learn more about using the components.