React Components Chat

PubNub's Chat Components library provides easy-to-use components to build chat applications with our React SDK.

Chat

Author:

Chandler Mayo

Github Repo

React Components Chat

PubNub's Chat Components library provides easy-to-use components to build chat applications with our React SDK. This chat demo also works with the PubNub Moderation Dashboard allowing for powerful admin chat moderation abilities.

Our component library is the fastest way to add chat features like direct and group messaging, typing indicators, reactions and more without going through the complexity of low-level architecture of realtime networks. At the same time it allows you to create apps for various use cases, with different functionalities and customizable looks.

Demo Features

  • Highly customizable modular design.

  • Supports text and image moderation with the PubNub Moderation Dashboard.

  • Fully featured chat demo.

Chat Features

  • User and Channel Metadata - Fetch metadata about users, channels and memberships from PB Objects storage using custom hooks.

  • Subscriptions - Automatic subscriptions to current channel and optional subscriptions to other channels and channel groups.

  • Messages - Publish and listen to text messages as well as fetch history for each channel.

  • Presence - Get currently present users and listen to new presence events.

  • Typing Indicators - Typing indicators for knowing when a message is being written.

  • Message Reactions - Publish and display message reactions (emojis) for each message.

How to Demo

  1. Get started - Open the demo in two or more windows to simulate transmitting messages in real time.

  2. Start a new conversation - Select a channel and type a message.

  3. Send messages - Click ‘Send’ to send your message to all users in the chat.

  4. Do more - Learn how this works by reading our React Chat Components Tutorial.

SDKs and Source Code

Feedback & Support

Need help? Contact PubNub Support.

Feedback & Support

Need help? Contact PubNub Support.

More Demos for you

Support Chat

Support Chat

Support Chat lets you build effective support chat to increase customer...

Learn more
10CHAT

10CHAT

A simple chat app powered by PubNub.

Learn more
Babel

Babel

This message will self-destruct in five seconds. Babel is an open source...

Learn more

Talk to an expert

Contact Sales