We’re excited to share that Ably Chat, our dedicated chat SDK, now includes support for custom contexts and hooks for React and React Native. This makes it even easier for developers to build chat features that feel seamless and native to these platforms.
Ably Chat is purpose-built to help you deliver reliable, scalable chat, whether it’s for livestreams, in-game comms, customer support, or social features in your SaaS product. It abstracts away the complexity of real-time infrastructure, giving you simple APIs for common chat needs.
With Ably Chat, you can create group chat rooms or 1:1 conversations, send and receive messages, show who’s online, track connected devices with occupancy metrics, and easily add features like typing indicators and reactions, all without reinventing the wheel.
Now with our custom React Hooks, adding chat to your application is even simpler! Specifically you gain access to:
- Full suite of Ably Chat features as Hooks: Everything you need to build a chat application: create chat rooms, send messages, show presence and much more, all wrapped in easy to use hooks.
- React flavoured, composable realtime experiences: Combine Ably Chat with other customised realtime experiences with Ably Pub/Sub React Hooks.
- Handling asynchronous operations: no more headaches with hot reloading potentially messing up your Ably connections and realtime state.
- Testing, maintenance, and updates fully managed: We provide the hooks, leave the maintenance chores like tests, bug fixes and updates to us.
- State management: Keep the Ably connection and chat room state in sync with the component state in your UI.
- High performance at scale: As always, all of Ably’s products and features are powered by our market-proven, realtime infrastructure that’s built for reliability at scale, backed by five nines SLAs, and messaging guarantees.
Custom Hooks currently available for React and React Native apps:
ChatClientProvider- This provider makes the ChatClient available to all child components in your React component tree.useChatClient- Lets you access the ChatClient from your React components, using the context from the ChatClientProvider.useChatConnection- Allows you to check the connection status of the ChatClient from your React components.ChatRoomProvider- This provider gives access to a specific chat room for all child components in the component treeuseRoom- The useRoom hook gives direct access to the Room object from the nearest ChatRoomProvider.useMessages- Lets you interact with the messages in a chat room.useOccupancy- Allows you to check how many people are in the current chat room aka the occupancy metrics of the room.useRoomReactions- Allows you to send and receive reactions within the chat room.useTyping- Lets you listen to or send typing events for the current room.usePresence- Allows you to manage your presence status in a chat room.usePresenceListener- Gives access to the current list of present users and lets you add listeners for presence event updates.
Check out the docs to learn more, dive into the API Reference or play with a demo app.
Get started with Ably Chat
Ably Chat is now generally available! Our purpose-built APIs make it easy to add realtime messaging, presence tracking, typing indicators, and reactions to your app.
Learn more about how to build engaging, reliable chat experiences with Ably Chat today.
