Juice Chat 🍹

Build production-ready, full-stack chat in minutes. Drop in our pre-made UI components, connect them to the backend using a few react hooks, and you're good to go.

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.

Install

npm i usechat @nandorojo/fuego firebase

For expo users:

expo install react-native-reanimated react-native-gesture-handler

For everyone else:

npm i  react-native-reanimated react-native-gesture-handler

// or:
yarn add react-native-reanimated react-native-gesture-handler

Example

This is all it takes to build a full-stack live chat with juice in React/React Native

import * as React
import { useNavigation } from 'react-navigation'
import { useInbox, Inbox, useMessages } from 'usechat'
import GiftedChat from 'react-native-gifted-chat'

const InboxScreen = () => {
    const [{ data }] = useInbox()
    const navigation = useNavigation()

    return <Inbox rooms={data} onPressItem={id => navigation.navigate('Chat', { id })} >
}

const ChatScreen = () => {
    const [{ data }, { send }] = useMessages()

    return <GiftedChat 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 animationa, 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 (like an instagram feed-to-DM flow.)

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 />

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

⚡️ <Chat /> Like GiftedChat, to the max.

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

🐻 Create chat room

🎃 Leave chat room

🤘 Remove users from chat room

👮‍♂️ Customizable avatars for chat rooms

Auth integration

If you're using Firebase auth

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

If you aren't using Firebase auth