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 { 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};

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 slackConnectChannel: string;
14  readonly slackChannelId: string;
15  readonly slackConnecting: string;
16  readonly slackDisconnecting: string;
17  readonly slackConnect: string;
18  readonly slackConnected: string;
19  readonly slackConnectContainerDescription: string;
20  readonly slackSearchbarDisconnected: string;
21  readonly slackSearchbarMultipleChannels: string;
22  readonly slackSearchbarNoChannelsConnected: string;
23  readonly slackSearchbarNoChannelsFound: string;
24  readonly slackSearchbarChannelsError: string;
25  readonly slackSearchChannels: string;
26  readonly slackConnectionErrorOccurred: string;
27  readonly slackConnectionErrorExists: string;
28  readonly slackChannelAlreadyConnected: string;
29  readonly slackError: string;
30  readonly slackDisconnect: string;
31  readonly slackChannelSetError: string;
32  readonly slackAccessTokenNotSet: string;
33  readonly slackReconnect: string;
34}
35
36interface I18nContent {
37  readonly translations: Partial<Translations>;
38  readonly locale: string;
39}

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 ContainerObject = {
2  objectId: string;
3  collection: string;
4};

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