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

chatverse

v1.0.97

Published

Firebase chat package

Downloads

35

Readme

Firestore Chat

Introduction

The Firestore chat package includes components you need to build a functioning chat user experience in React js with support for one to one and group chat. It uses Firebase as the backend service.

The Package takes care of the basic functionality requirements for any chat application. In this project We have used the following Firebase services.

  • Firebase Authentication : For authentication user by email and password
  • Firebase Firestore Database : It is the db we used for Firestore chat
  • Firebase Storage : That's we used to store images and videos

Main features

- One to one chat
- Group chat
- Firebase authentication
- User listing
- User block - unblock
- User search
- Group create
- Group edit
- Group exit
- Message seen - unseen

Installation

To install Firestore chat on your project, follow below steps:

Step 1 - Install Firestore chat

Use the following command to install Firestore chat

$ npm install chatverse --save-exact

Step 2 - Firebase Registration

After a user is registered in the main project we need to register and add that user to firestore chat also, for that purpose, we can use firebaseSignUp function which can be imported from the firestore chat package and this function will return a Firebase uid which can be stored in the database of main project against the particular registered user.

import { RegisterToChat } from 'chatverse';
const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: ' ',

    authDomain: '',

    databaseURL: '',

    projectId: '',

    storageBucket: '',

    messagingSenderId: '',

    appId: '',

    measurementId: '',
  });

  const email = data.email;
  const password = data.password;
  const displayName = data.name.trim()

const firebaseData = await RegisterToChat(firebaseConfig, email, password ,displayName);

Here in the RegisterToChat function, we need to pass four arguments: firebaseConfig which is the firebase configurations, email, password and displayName which contains details of that person. The function returns the firebase uid of that particular person.

Step 3 - Firebase Login

After a user login into the main project, we need to log in that user to firestore chat also, for that purpose, we can use the LoginToChat function which can be imported from the chatverse package and this function will return a Firebase uid if the firebase login is successful.

import { LoginToChat } from 'chatverse';
const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: ' ',

    authDomain: '',

    databaseURL: '',

    projectId: '',

    storageBucket: '',

    messagingSenderId: '',

    appId: '',

    measurementId: '',
  });

const firebaseData = await LoginToChat( firebaseConfig, email, password );

Here in the LoginToChat function, we need to pass three arguments: email, password which is the email and password of the user we are trying to login and firebaseConfig which is the firebase configurations. The function returns the firebase uid of that particular person.

Step 4 - Package Loading

After the firebase authentication functions are implemented, finally we can load the chat component of firestore chat in our desired functional component in the main project, we can load the chat component by importing FirestoreChat from the firestore chat package and then render it.

import { FirestoreChat } from 'chatverse';
const [customStyle, setCustomStyle] = useState({
    primaryColor: '#6b5dd3',
    secondaryColor: '#9083e9',
  });
  const [condition, setCondition] = useState(false);
  const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: '',

    authDomain: '',

    databaseURL: '',

    projectId: '',

    storageBucket: '',

    messagingSenderId: '',

    appId: '',

    measurementId: '',
  });

    <FirestoreChat
        firebaseConfig={firebaseConfig} 
        condition={condition} 
        styles={customStyle}
       />

While loading the Chat component of the firestore chat, we also needed to pass some data as props like firebase configurations and some basic styles like primary color, secondary color.

| prop | description | required | default | |-------------|-------------|-------------|-------------| | firebaseConfig | Firebase configuration details| true | None | | | condition | Conditional listing is used to decide whether the listing of users in firestore chat should conditional based or not. | true | None | | styles | The styles props can be used to set some basic styles of package like primary color, secondary color | true | None |

Styles

| style | description | required | default | |-------------|-------------|-------------|-------------| | primaryColor | Primary color of the firestore chat | true | None | | | secondaryColor | Secondary color of the firestore chat | true | None |

Conditional based user listing

If we want the user's list from which we can chat in firestore chat to be conditional based like we only want to chat with other users who are our followers or friends, then we can use a conditional-based user listing, to activate conditional-based user listing we need to do two things:

  • set conditional_listing to true while we load the chat component

    Example -

    const [condition, setCondition] = useState(true);
     <Chat
       firebaseConfig={firebaseConfig}
       condition={condition}
       styles={customStyle}
      />
    • While following or connecting to other users call the AddUserToChat and RemoveUserToChat functions in the firestore chat package and pass the firebase uid's of the following user and followed user.

    Example - Adding Friend or Follower

     import { AddUserToChat } from 'chatverse';
    const [firebaseConfig, setFirebaseConfig] = useState({
      apiKey: ' ',
    
      authDomain: '',
    
      databaseURL: '',
    
     projectId: '',
    
     storageBucket: '',
    
     messagingSenderId: '',
    
     appId: '',
    
     measurementId: '',
    });
    
    const firebaseData = await AddUserToChat(current_user, friend, firebaseConfig);
  • Removing Friend or Follower

     import { RemoveUserToChat } from 'chatverse';
    const [firebaseConfig, setFirebaseConfig] = useState({
      apiKey: ' ',
    
      authDomain: '',
    
      databaseURL: '',
    
     projectId: '',
    
     storageBucket: '',
    
     messagingSenderId: '',
    
     appId: '',
    
     measurementId: '',
    });
    

const firebaseData = await RemoveUserToChat(current_user, friend, firebaseConfig);


Here in the function AddUserToChat and  RemoveUserToChat we need to pass three arguments:
- current_user :  firebase uid of the following user
- friend :  firebase uid of the followed user
- firebaseConfig :  firebase configurations