@pubnub/react-chat-components

PubNub Chat Components is a development kit of React components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low

Usage no npm install needed!

<script type="module">
  import pubnubReactChatComponents from 'https://cdn.skypack.dev/@pubnub/react-chat-components';
</script>

README

PubNub Chat Components for React

PubNub Chat Components for React are the fastest way to add chat features like direct and group messaging, typing indicators, reactions, without going through the complexity of low-level architecture of realtime networks.

  • Reduced Implementation Time: Develop proof-of-concept and production ready apps faster using predefined components.
  • Fast and Simple Extensibility: Add rich features like typing indicators, read receipts, reactions etc. without writing complex code.
  • Flexible and Customizable Components: Customize component design and add custom components to extend functionality.
  • High Scalability: Let PubNub take care of scaling and reliability as you grow your app.
  • Easy Theming: Use the built-in light and dark themes or create custom ones for various use cases: group, support, and event chats.
  • Strong Typing: Utilize the power of TypeScript to develop your application.

PubNub Chat Components

Features

  • User and Channel Metadata: Add additional information about the users, channels, and their memberships from PubNub Objects storage using custom hooks
  • Subscriptions: Subscribe to user channels automatically
  • Messages: Publish and display new and historical text messages
  • Presence: Get currently active users, observe their state, and notify about changes
  • Typing Indicators: Display notifications that users are typing
  • Message Reactions: Publish and add emojis to messages

Available components

Prerequisites

Usage

Start by exploring our sample apps that are built using chat components.

Follow the steps in the Getting Started guide to:

  • Set up a sample chat app and send your first message.
  • Install chat components to extend your existing React applications.

Related documentation

Support

If you need help or have a general question, contact support.