Using React

Installation

To get started, you will need to install MinChat React SDK in your React app.

npm

npm install @minchat/react

yarn

yarn add @minchat/react

pnpm

pnpm install @minchat/react

Initialize MinChatProvider

Import the MinChatProvider at the top of your file.

add to imports section

import { MinChatProvider } from '@minchat/react';

Wrap your chat app with the MinChatProvider passing the MINCHAT_API_KEY as well as the user as props. The API Key can be found on the Minchat dashboard.

const currentUser = {
        username: "micheal",
        name: "Micheal Saunders",
}

<MinChatProvider
        apiKey={MINCHAT_API_KEY}
        user={currentUser}>
                
                {/* your chat app components  */}

</MinChatProvider>

You can view more details about the currentUser parameters here.

Import the useMinChat hook at the top of your file.

add to imports section

import { useMinChat } from '@minchat/react';

You can now access the MinChat SDK object.

const minchat = useMinChat()

Creating a user

In MinChat, a User is a person that uses your app. Typically, you will have one MinChat User for each user in your own database.

Usually, you would create users based on the data from your database. A User is represented by a JSON object.

before you can start a conversation with another user, the user would first need to be created.

const otherUser = await minchat.createUser({ 
                                  username: "example-username", 
                                  name: "Example Name",
                            })
                            

You can view more details about the user parameters here.

Fetching a user

You can fetch an already existing user using either their username or their id.

const otherUser = await minchat.fetchUser("example-username")

const otherUser = await minchat.fetchUserById("example-id")
                            

Starting a conversation

There's not much point in a chat app with only one person using it, so let's create another User.

A Conversation(Chat) is a place for two or more users to chat. That could mean a simple direct message between users, or it might be something fancier. MinChat works with all kinds of conversations, from group chats to one on one conversations.

One-to-One Conversation

const chat = await minchat.chat(otherUser.username)

You can view more details about the response and parameters here.

Group Chat

const chat = await minchat.groupChat({
                                title: "Epic Group Chat", 
                                memberUsernames: [ otherUser.username , thirdUser.username ] 
                            })

You can view more details about the response and parameters here.

Get Messages

Messages retrieved in a conversation are paginated to 25 messages at a time.

add to imports section

import { useMessages } from '@minchat/react';

const {
         messages,
         loading,
         error,
         paginate,
         paginateLoading,
         sendMessage,
         updateMessage,
         deleteMessage

      } = useMessages(chat)

You can view more details about the response and parameters here.

Send Message

To send a message, call the sendMessage(...) function from useMessages hook.

sendMessage({ text: "Hello World!" })

You can view more details about the response and parameters here.

New messages received are automatically added to the messages variable of useMessages(...)

Get list of conversations of current user

You can get a list of the conversations of the current user. conversations retrieved are paginated to 25 messages at a time. New conversations started by other users or messages sent to conversations that are on a different page are automatically added to the chats array.

import { useChats } from '@minchat/react';

const { chats, loading, error, paginate, paginateLoading } = useChats()

You can view more details about the response and parameters here.

This concludes our setup instructions for our most basic form of integration. In this short guide, you've taken your React app to the next level with powerful user-to-user chat. You also learned more about the fundamentals of MinChat, and how it all fits together. Most importantly, you've built a starting point to try out all the features MinChat offers.

For more additional features, view the Reference Docs.