npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

chat

v1.0.8

Published

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

Downloads

1,946

Readme

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.