Note: This package has been archived. If you're using @knocklabs/react-notification-feed, check out our migration guide to learn how to use our new React library.
A set of components for integrating Knock in-app notifications into a React application.
Note: these components are currently designed to be used in conjunction with the Knock in-app feed channel, and via React for web only.
Via NPM:
npm install @knocklabs/react-notification-feed Via Yarn:
yarn add @knocklabs/react-notification-feed To configure the feed you will need:
- A public API key (found in the Knock dashboard)
- A feed channel ID (found in the Knock dashboard)
- A user ID, and optionally an auth token for production environments
You can integrate the feed into your app as follows:
import { KnockFeedProvider, NotificationIconButton, NotificationFeedPopover, } from "@knocklabs/react-notification-feed"; // Required CSS import, unless you're overriding the styling import "@knocklabs/react-notification-feed/dist/index.css"; const YourAppLayout = () => { const [isVisible, setIsVisible] = useState(false); const notifButtonRef = useRef(null); return ( <KnockFeedProvider apiKey={process.env.KNOCK_PUBLIC_API_KEY} feedId={process.env.KNOCK_FEED_ID} userId={currentUser.id} > <> <NotificationIconButton ref={notifButtonRef} onClick={(e) => setIsVisible(!isVisible)} /> <NotificationFeedPopover buttonRef={notifButtonRef} isVisible={isVisible} onClose={() => setIsVisible(false)} /> </> </KnockFeedProvider> ); };Alternatively, if you don't want to use our components you can render the feed in a headless mode using our hooks:
import { useAuthenticatedKnockClient, useNotifications, } from "@knocklabs/react-notification-feed"; import create from "zustand"; const YourAppLayout = () => { const knockClient = useAuthenticatedKnockClient( process.env.KNOCK_PUBLIC_API_KEY, currentUser.id ); const notificationFeed = useNotifications( knockClient, process.env.KNOCK_FEED_ID ); const useNotificationStore = create(notificationFeed.store); const { metadata } = useNotificationStore(); useEffect(() => { notificationFeed.fetch(); }, [notificationFeed]); return <span>Total unread: {metadata.unread_count}</span>; };