Video: Building React Primitives to Power In-App Messaging

From Author:

At Knock we power real-time in-app messaging experiences via our React SDK, enabling product teams to drop in components and have fully featured in-app notification feeds, modals, banners, and more instantly available. In this talk, we'll take a look at how we structured our React library in a composable way, giving teams the power to use our components out of the box, override styling with their own tokens, or bring their own UI components via hooks. We'll dive into how we structured our SDK to provide maximum flexibility for engineering teams, while preserving ease of maintenance.

This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.

Rate this content
Bookmark
Video summary
Hi, everyone. I'm Chris, the CTO at Nock. We help product teams power user-centric cross-channel notification experiences. Today, I'll talk about extending the abilities of our in-app messaging and how you can power any kind of in-app messaging using our platform. We optimize for flexibility, customization, and a shallow learning curve. Our pre-built React components include a banner, modal, card, and notification feed. All of this comes out-of-the-box, supporting light mode and dark mode. Easily show modals and announcements with no additional code. Own the rendered components for performance and customization. Build custom components with minimal code. Use hooks for fetching data and real-time updates. Noc provides a schema for strong data integrity.

FAQ

Knock provides pre-built components like banners, modals, cards, and notification feeds that support both light and dark modes.

Knock helps product teams power user-centric cross-channel notification experiences, including emails, push notifications, SMS, Slack, and in-app experiences like notification feeds.

Chris is the CTO of Knock.

Knock powers all of Vercel's in-app and email notifications, such as notifications for failed builds.

Knock uses a React library, a set of hooks, and a real-time service for building in-app messaging experiences.

Yes, Knock can be integrated with other frameworks like Vue or Svelte.

The components provided by Knock are highly customizable. Users can override styles and customize components to fit their design systems.

Knock allows teams to own the components rendered in their apps, enabling them to focus on performance and optimization rather than relying on HTML injected over the wire.

More information about Knock can be found at their website noc.app or by visiting their booth.

Chris Bell
Chris Bell
8 min
19 Nov, 2024

Comments

Sign in or register to post your comment.
Video transcription
Sign in to access video transcription and chapter summary.