Exciting news!Announcing our $4.6M Series Seed. Learn more โ†’
Socket
LoveBlogFAQ
Install
Log in

chat

Package Overview
Dependencies
8
Maintainers
1
Versions
26
Issues
File Explorer

Advanced tools

chat

The best fully-hosted chat solution for React Native/Expo.

    1.0.8latest

Version published
Maintainers
1
Yearly downloads
11,015
increased by122.21%

Weekly downloads

Readme

Source

chat ๐Ÿน

yarn add chat

Build production-ready, full-stack chat in minutes. Drop in our pre-made UI components, connect them to your backend our pre-made logic, and you're good to go.

Stop worrying about:

โœ… Auth

โœ… Customizable UI

โœ… Transitions & animations

โœ… Websockets, data & fallbacks

โœ… Offline support (beta)

โœ… 1-on-1 and group chats

import * as React import { useMessages, Messages } from 'usechat' const ChatScreen = () => { const { data, send } = useMessages({ id: 'my-first-chat-room' }) return <Messages onSend={send} messages={data} /> }

Backend setup for firebase

If you only want to use this library for the UI components, there is no further setup required.

However, if you want to connect your firebase/firestore backend, there is are two added steps.

1. Install dependencies

yarn add firebase @nandorojo/fuego

2. Add the provider to the root of your app

Initialize fuego's db first. Then, wrap your app with the ChatProvider.

// App.tsx import * as React from 'react' import { ChatProvider } from 'chat' import { Fuego } from '@nandorojo/fuego' const fuego = new Fuego({ //...firebase config here }) export default () => { return <ChatProvider fuego={fuego}>{/* Your app goes here*/}</ChatProvider> }

How to find your firebase config

Note: Make sure you've enabled firebase firestore to use this. See this tutorial for more.

Brief Example

This is all it takes to build a full-stack live chat with chat in React/React Native (with some abstraction).

import * as React import { useNavigation, useNavigationParam } from 'react-navigation' import { useInbox, Inbox, useMessages, Messages } from 'usechat' const InboxScreen = () => { const { data } = useInbox() const navigation = useNavigation() return <Inbox rooms={data} onPressItem={id => navigation.navigate('Chat', { id })} > } const ChatScreen = () => { const id = useNavigationParam('id') const { data, send } = useMessages({ id }) return <Messages onSend={send} messages={data} /> }

Highlights

๐Ÿ˜Ž Works with react and react native (including Expo!)

๐Ÿšจ Integrates with Firebase auth (and can also work with your custom auth solutions)

๐Ÿ“ฃ Integrates with expo-notifications

๐Ÿฅ Fully customizable UI components

๐Ÿ‡ Production-level animations, transitions, and swipe gestures.

๐Ÿ‘พ Written in TypeScript


Get Started

Setup is quick and easy. Jump to the setup guide. Then, check out the hello world and example.


Chat features included out-of-the-box

โœ๏ธ Typing indicators

๐Ÿ’ฏ Unread count

๐Ÿ˜‚ Meme search (powered by Memezy)

๐Ÿ‘ป Image & video, including uploading logic & content storage

๐Ÿช Online status

๐Ÿ•บ Realtime inbox

๐Ÿคฏ Realtime chat rooms

๐Ÿ˜‡ Room-level user permissions

๐Ÿ”ฅ Group chats

๐Ÿ‘ด Customizable system messages (ex: William Buzzelbees changed the group name to "Frankenstein's Friday Squad")

๐Ÿ‘€ Send a message to multiple people, even if a room with those people doesn't exist yet (like an instagram feed-to-DM flow.)

๐Ÿฅ‡ Room names (coming soon)

Customizable components included

๐Ÿงค <AuthGate /> wraps your app and gives it customizable auth, powered by firebase.

๐Ÿงข <Inbox /> gives you a real-time list of chat rooms.

๐ŸŽฉ <InboxItem /> List item for <Inbox />, including customizable swipe gestures.

โ›‘ <TypingIndicator /> Show typing, with animations, as it happens

๐Ÿช <UnreadIndicator /> Show an iMessage-like unread indicator, with or without the number of unread messages.

โšก๏ธ <Messages /> Like GiftedChat, to the max.

All the logic you'd need for a chat, handled.

Functions are pre-made for the following:

๐Ÿป Create chat room

๐ŸŽƒ Leave chat room

๐Ÿค˜ Remove users from chat room

๐Ÿ‘ฎโ€โ™‚๏ธ Customizable avatars for chat rooms

๐Ÿ„๐Ÿพโ€โ™‚๏ธ Add people to a chat room

Auth integration

If you're using Firebase auth

Chat will automatically integrate into your Firebase auth if you're using it once you've completed the setup.

Aren't there a lot of chat SDKs already? What makes this better than all the others?

Yes, there are. The motivation for this library comes down to only one concept: production-ready chat.

If you google react native chat tutorial, you'll come up with many smart people writing good articles about building your first chat app. Suggestions range from using firebase's highly-customizable serverless database to more opinionated startups that build SDKs for chat only.

The thing is, none of these options created a production-ready chat that "thinks in React."

With a custom option like Firebase, you're having to deal with tons of different socket subscriptions, chat schema changes, etc, and building in features like unread count, online status, or typing indicators becomes non-trivial quickly.

Meanwhile, existing JavaScript chat SDKs aren't made with React's stateful nature in mind. Companies like Pusher, PubNub, and Stream clearly have something good going for them, but they aren't made for React the way a library like Apollo is.

You should be able to build a customizable, full-stack chat with only a few lines of code. If Stripe can do that for accepting payments, we can do it for sending words.

Tutorials for existing chat SDKs have you typing setState dozens of times, and you wonder, would this actually look as good as iMessage in production? What if I want to move my component files around? What if I forget to unmount a listener on a certain screen? And if I want to reorganize my component files, do I have to write all that bulky setState logic over? What happens if I want to use a state manager like redux?

With all those questions in mind, I decided I would go feature-by-feature, headache-by-headache, and make my own chat SDK that was made specifically for react/react-native (and expo in particluar).

Thanks to the introduction of react hooks in React 16.8.3 (and in expo after SDK v33 ๐Ÿ”ฅ), making a react-first chat SDK went from a massive headache to an elegant, scalable experience.

This chat library relies on two main APIs: firebase firestore for the database, react hooks for stateful component logic.

That means that you can build a serverless chat app that is actually ready for production. And when you need extra customizations like unread counts and typing indicators, you just click that you want them in a GUI.

A final point: most chat SDKs own your messages and data. With us, we just link into your firebase, so you own all the data.

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc