Skip to main content
Version: React SDK

Examples

Practical, task-based code snippets for @screeb/sdk-react.

Basic setup​

If the user is already authenticated when the app loads, pass their identity directly to ScreebProvider to avoid creating an anonymous user:

// index.tsx or App.tsx
import { ScreebProvider } from "@screeb/sdk-react";

export default function App() {
  return (
    <ScreebProvider
      websiteId="<YOUR-CHANNEL-ID>"
      autoInit
      userId="<USER-ID>"
      userProperties={{ email: "support@screeb.app", plan: "pro" }}
    >
      <YourApp />
    </ScreebProvider>
  );
}

If the userId is not yet available at startup, omit it and call identity() after login (see below).

Identify a user after login​

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

function AuthComponent() {
  const { identity } = useScreeb();

  async function onLogin(user: User) {
    await identity(user.id, {
      email: user.email,
      plan: user.plan,
    });
  }
}

Track an event​

const { trackEvent } = useScreeb();

await trackEvent("checkout_completed", {
  amount: 99.99,
  currency: "USD",
});

Start a survey programmatically​

const { surveyStart } = useScreeb();

// Default targeting rules
await surveyStart();

// Specific survey
await surveyStart({ surveyId: "<SURVEY-ID>" });

Use hooks​

<ScreebProvider
  websiteId="<YOUR-CHANNEL-ID>"
  autoInit
  hooks={{
    onSurveyCompleted: ({ surveyId }) => {
      console.log("Survey completed:", surveyId);
    },
  }}
>
  <YourApp />
</ScreebProvider>

Reset on logout​

const { identityReset } = useScreeb();

await identityReset();