A set of components for integrating a Knock in-app feed 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} // Optional in non production environments userToken={currentUser.knockUserToken} // Optionally you can scope the feed in a particular manner // tenant={currentWorkspace.id} // Optionally you can stop the provider rendering any markup and use `KnockFeedContainer` to wrap components // rootless > <NotificationIconButton ref={notifButtonRef} onClick={(e) => setIsVisible(!isVisible)} /> <NotificationFeedPopover buttonRef={notifButtonRef} isVisible={isVisible} onClose={() => setIsVisible(false)} /> </KnockFeedProvider> ); };See the documentation to customize the feed for your application.