We are excited to announce that the Ably Chat SDK for JavaScript now includes support for custom contexts and hooks for React and React Native applications allowing developers working with these platforms to integrate chat features in an efficient and idiomatic way.
Ably Chat is designed to meet a wide range of chat use cases, such as livestreams, in-game communication, customer support, or social interactions in SaaS products. Built on Ably's core service, it abstracts complex details to give you out-of-the-box APIs for common chat features.
With Ably Chat, you can easily create chat rooms for group conversations or 1:1 chats. In these rooms, you can enable users to send and receive messages, check if others are online, and track the number of connected devices with occupancy metrics. You'll also have access to APIs for typing indicators and room reactions.
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 currently available in beta. In addition to the current feature set we have some exciting features in the pipeline, including support for chat message moderation, and interacting with chat messages via reactions, receipts, replies and other tags. Sign up to the private beta to get early access and start building today.
