Skip to main content
Version: React SDK

React SDK

npm versionLicense: MITminzipped sizedownloads

CI environments

Deactivate the Screeb SDK during CI execution to avoid creating anonymous users and exceeding your MTU limit.

Prerequisites​

  • Node.js 14 or later
  • React 17 or later

Add Screeb as a dependency​

npm install @screeb/sdk-react --save
# or
yarn add @screeb/sdk-react

Setup — wrap your app with ScreebProvider​

import { ScreebProvider } from "@screeb/sdk-react";

export const App = () => (
  <ScreebProvider
    autoInit
    websiteId="<YOUR-CHANNEL-ID>"
    userId="<USER-ID>"
    userProperties={{
      firstname: "<user-firstname>",
      plan: "<user-plan>",
      last_seen_at: new Date(),
      authenticated: true,
    }}
  >
    <YourApp />
  </ScreebProvider>
);
tip

You can find your channel id in your workspace settings.

Use the useScreeb hook​

Access all Screeb methods via the useScreeb hook in any component inside ScreebProvider:

import { useScreeb } from "@screeb/sdk-react";

const HomePage = () => {
  const { eventTrack } = useScreeb();

  return (
    <button onClick={() => eventTrack("button-clicked")}>
      Track event
    </button>
  );
};

SDK lifecycle​

const { close } = useScreeb();
close();

Example app​

See the example-react for a working integration.