Knock React Feed

Usage

import {
  KnockProvider,
  FeedProvider,
  NotificationBadge,
  useFeedToken,
} from "@knocklabs/react-feed";

function App() {
  return (
    <KnockProvider apiKey={process.env.KNOCK_API_KEY}>
      <MyComponent />
    </KnockProvider>
  );
}

function MyComponent() {
  const currentUser = useCurrentUser();
  const feedToken = useFeedToken(process.env.KNOCK_FEED_ID, currentUser.id);

  return (
    <header>
      <FeedProvider token={feedToken}>
        <NotificationBadge>
          {({ onClose }) => (
            <ActivityFeed
              onActivityClick={() => {
                onClose();
              }}
            />
          )}
        </NotificationBadge>
      </FeedProvider>
    </header>
  );
}

Development

To start up the build process in order to work with the library locally, either in the example repo, or by linking elsewhere:

0. git clone [email protected]:knocklabs/react-feed.git && cd react-feed
1. npm i
2. npm run dev

Example

There's an example application that you can load in your browser for local development under the example/ directory.

0. cd example
1. yarn
2. yarn run start

It's set to point to localhost:4000, which is the dev instance of the Knock API.