Comment on page
Overview
To get started, you will need to install MinChat React SDK in your React project.
npm
yarn
pnpm
npm install @minchat/react
yarn add @minchat/react
pnpm install @minchat/react
The MinChat SDK needs to be initialized with the
MINCHAT_API_KEY
as a parameter as well as a User object representing the current user logged in. The API Key can be found on the Minchat dashboard.The SDK is initialized using the
MinChatProvider.
Import the MinChatProvider
at the top of your file.add to imports section
import { MinChatProvider } from '@minchat/react';
Wrap your app with the
MinChatProvider
passing in the currentUser
and the MINCHAT_API_KEY
as props. The API Key can be found on the Minchat dashboard.<MinChatProvider
apiKey={MINCHAT_API_KEY}
user={currentUser}>
{/* your chat app components */}
</MinChatProvider>
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()
You should create users in your MinChat application to initiate conversations with. Users are at the core of all conversations. MinChat applications are made up of users who chat in either group chats or one-to-one conversations.
Usually, you would create users based on the data from your database. A User is represented by a JSON object.
const otherUser = await minchat.createUser({
username: "example-username",
name: "Example Name"
})
note:
createUser(...)
automatically creates a new user in the system, if a user with the same username already exists then it will reuse that 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")
You can update an existing user's information
const updatedUser = await minchat.updateUserById("example-user-id",
{
name: "Updated Name",
})
const chat = minchat.chat(otherUser.username)
Field | Type | State | Description |
---|---|---|---|
username | string | required | The username of the user to start a conversation with. (note: this user must already be created) |
const chat = await minchat.groupChat({
name: "Epic Group Chat",
memberUsernames: [ otherUser.username , thirdUser.username ],
avatar: "exampleavatar.com"
})
Field | Type | State | Description |
---|---|---|---|
name | string | optional | The name of the group chat. |
memberUsernames | string | required | username list of participants of the group chat. |
avatar | string | file | optional | the avatar of the group chat |
Last modified 2mo ago