React SDK API reference

1import { KnockProvider, useKnockClient } from "@knocklabs/react";
2
3const App = ({ authenticatedUser }) => (
4  <KnockProvider
5    apiKey={process.env.KNOCK_PUBLIC_API_KEY}
6    userId={authenticatedUser.id}
7  >
8    <MyComponent />
9  </KnockProvider>
10);
11
12const MyComponent = () => {
13  const knock = useKnockClient();
14
15  return null;
16};

1import {
2  KnockProvider,
3  KnockFeedProvider,
4  useKnockFeed,
5} from "@knocklabs/react";
6
7const App = ({ authenticatedUser }) => (
8  <KnockProvider
9    apiKey={process.env.KNOCK_PUBLIC_API_KEY}
10    userId={authenticatedUser.id}
11  >
12    <KnockFeedProvider feedId={process.env.KNOCK_FEED_CHANNEL_ID}>
13      <MyFeedComponent />
14    </KnockFeedProvider>
15  </KnockProvider>
16);
17
18const MyFeedComponent = () => {
19  const { useFeedStore } = useKnockFeed();
20  const items = useFeedStore((state) => state.items);
21
22  return (
23    <div className="notifications">
24      {items.map((item) => (
25        <NotificationCell key={item.id} item={item} />
26      ))}
27    </div>
28  );
29};

1import {
2  KnockProvider,
3  KnockSlackProvider,
4  useKnockSlackClient,
5} from "@knocklabs/react-core";
6
7const App = ({ authenticatedUser, tenant }) => (
8  <KnockProvider
9    apiKey={process.env.KNOCK_PUBLIC_API_KEY}
10    userId={authenticatedUser.id}
11  >
12    <KnockSlackProvider knockSlackChannelId={process.env.KNOCK_SLACK_CHANNEL_ID} tenant={tenant}>
13      <MySlackComponent />
14    </KnockFeedProvider>
15  </KnockProvider>
16);
17
18const MySlackComponent = () => {
19    const { connectionStatus,
20        setConnectionStatus,
21        errorLabel,
22        setErrorLabel,
23        actionLabel,
24        setActionLabel,
25        knockSlackChannelId,
26        tenant, } =
27    useKnockSlackClient();
28
29  return (
30    <div className="slack-auth-status">
31        <AuthStatus connectionStatus={connectionStatus} />
32    </div>
33  );
34};

1import { Banner } from "@knocklabs/react";
2
3<Banner filters={{ tenant_id: "tenant-1" }} />;

1import { Card } from "@knocklabs/react";
2
3<Card filters={{ tenant_id: "tenant-1" }} />;

1import { Modal } from "@knocklabs/react";
2
3<Modal filters={{ tenant_id: "tenant-1" }} />;

1import { useAuthenticatedKnockClient } from "@knocklabs/react";
2
3const MyComponent = () => {
4  const knock = useAuthenticatedKnockClient(
5    process.env.KNOCK_PUBLIC_API_KEY,
6    user.id,
7    user.knockToken,
8  );
9
10  return null;
11};

1import {
2  useAuthenticatedKnockClient,
3  useNotifications,
4  useNotificationStore,
5} from "@knocklabs/react";
6
7const MyComponent = () => {
8  const knock = useAuthenticatedKnockClient(
9    process.env.KNOCK_PUBLIC_API_KEY,
10    user.id,
11    user.knockToken,
12  );
13
14  const notificationFeed = useNotifications(
15    knock,
16    process.env.KNOCK_FEED_CHANNEL_ID,
17  );
18
19  const { metadata } = useNotificationStore(notificationFeed);
20
21  useEffect(() => {
22    notificationFeed.fetch();
23  }, [notificationFeed]);
24
25  return <span>Total unread: {metadata.unread_count}</span>;
26};

1import { useNotificationStore } from "@knocklabs/react";
2
3const MyComponent = () => {
4  // Fetch everything
5  const state = useNotificationStore(feedClient);
6
7  // Only select the metadata
8  const metadata = useNotificationStore(feedClient, (state) => state.metadata);
9
10  // Filter for only unread items
11  const unreadItems = useNotificationStore(feedClient, (s) =>
12    s.items.filter((item) => !item.read_at),
13  );
14};

1import { useInAppMessage } from "@knocklabs/react";
2
3const MyMessage = () => {
4  const { message, inAppMessagesClient } = useInAppMessage("type", {
5    tenant_id: "tenant-1",
6  });
7
8  if (!message) return null;
9
10  return <div>Fetched message: {message.id}</div>;
11};

1interface Translations {
2  readonly emptyFeedTitle: string;
3  readonly emptyFeedBody: string;
4  readonly notifications: string;
5  readonly poweredBy: string;
6  readonly markAllAsRead: string;
7  readonly archiveNotification: string;
8  readonly all: string;
9  readonly unread: string;
10  readonly read: string;
11  readonly unseen: string;
12
13  readonly msTeamsChannelSetError: string;
14  readonly msTeamsConnect: string;
15  readonly msTeamsConnected: string;
16  readonly msTeamsConnecting: string;
17  readonly msTeamsConnectionErrorExists: string;
18  readonly msTeamsConnectionErrorOccurred: string;
19  readonly msTeamsConnectContainerDescription: string;
20  readonly msTeamsDisconnect: string;
21  readonly msTeamsDisconnecting: string;
22  readonly msTeamsError: string;
23  readonly msTeamsReconnect: string;
24  readonly msTeamsTenantIdNotSet: string;
25
26  readonly slackConnectChannel: string;
27  readonly slackChannelId: string;
28  readonly slackConnecting: string;
29  readonly slackDisconnecting: string;
30  readonly slackConnect: string;
31  readonly slackConnected: string;
32  readonly slackConnectContainerDescription: string;
33  readonly slackSearchbarDisconnected: string;
34  readonly slackSearchbarNoChannelsConnected: string;
35  readonly slackSearchbarNoChannelsFound: string;
36  readonly slackSearchbarChannelsError: string;
37  readonly slackSearchChannels: string;
38  readonly slackConnectionErrorOccurred: string;
39  readonly slackConnectionErrorExists: string;
40  readonly slackChannelAlreadyConnected: string;
41  readonly slackError: string;
42  readonly slackDisconnect: string;
43  readonly slackChannelSetError: string;
44  readonly slackAccessTokenNotSet: string;
45  readonly slackReconnect: string;
46}
47
48interface I18nContent {
49  readonly translations: Partial<Translations>;
50  readonly locale: string;
51}

1type SlackChannelQueryOptions = {
2  maxCount?: number; // The max number of channels to return; default: 1000
3  limitPerPage?: number; // How many Slack channels will be returned per request; default: 200
4  excludeArchived?: boolean; // Whether to include archived channels; default: true
5  types?: string; // Types of channels to return; default: "private_channel,public_channel"
6  teamId?: string; // Filters channels to a specific team ID; default: null
7};

1type SlackChannel = {
2  name: string;
3  id: string;
4  is_private: boolean;
5  is_im: boolean;
6  context_team_id: boolean;
7};

1type SlackChannelConnection = {
2  access_token?: string;
3  channel_id?: string;
4  incoming_webhook?: string;
5  user_id?: null;
6};

1type MsTeamsTeamQueryOptions = {
2  maxCount?: number; // The max number of teams to return; default: 1000
3  limitPerPage?: number; // How many teams will be returned per request; default: 100
4  filter?: string; // OData $filter query param to filter teams; default: null
5  select?: string; // OData $select query param to select fields; default: "id,displayName"
6};

1type MsTeamsChannelQueryOptions = {
2  filter?: string; // OData $filter query param to filter channels; default: "isArchived eq false and membershipType eq 'standard'"
3  select?: string; // OData $select query param to select fields; default: "id,displayName"
4};

1type MsTeamsTeam = {
2  id: string;
3  displayName: string;
4  description?: string;
5};

1type MsTeamsChannel = {
2  id: string;
3  displayName: string;
4  description?: string;
5  membershipType?: string;
6  isArchived?: boolean;
7  createdDateTime?: string;
8};

1type MsTeamsChannelConnection = {
2  ms_teams_tenant_id?: string;
3  ms_teams_team_id?: string;
4  ms_teams_channel_id?: string;
5  ms_teams_user_id?: null;
6  incoming_webhook?: {
7    url: string;
8  };
9};

1type RecipientObject = {
2  objectId: string;
3  collection: string;
4};

1type ConnectionStatus =
2  | "connecting"
3  | "connected"
4  | "disconnected"
5  | "error"
6  | "disconnecting";