# Overview

## Installation

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

{% tabs %}
{% tab title="npm" %}

```bash
npm install @minchat/react
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add @minchat/react
```

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm install @minchat/react
```

{% endtab %}
{% endtabs %}

The MinChat SDK needs to be initialized with the `MINCHAT_API_KEY` as a parameter as well as a [User](https://docs.minchat.io/reference/user) object representing the current user logged in. The API Key can be found on the [Minchat dashboard.](https://minchat.io/sdk)

The SDK is initialized using the `MinChatProvider.`Import the `MinChatProvider` at the top of your file.

{% code title="add to imports section" %}

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

{% endcode %}

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](https://minchat.io/sdk).

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

</MinChatProvider>
```

*You can view more details about the currentUser parameters* [*here*](https://docs.minchat.io/reference/user)*.*

Import the `useMinChat` hook at the top of your file.

{% code title="add to imports section" %}

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

{% endcode %}

You can now access the MinChat SDK object.

<pre class="language-javascript"><code class="lang-javascript"><strong>const minchat = useMinChat()
</strong></code></pre>

## Functions

### Create User

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.

in MinChat, a [User](https://docs.minchat.io/reference/user) is a person that uses your app. Typically, you will have one MinChat [User](https://docs.minchat.io/reference/user) for each user in your own database.&#x20;

Usually, you would create users based on the data from your database. A [User](https://docs.minchat.io/reference/user) is represented by a JSON object.

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

*You can view more details about the user parameters* [*here*](https://docs.minchat.io/reference/user)*.*

**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.

### Fetching a user

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

<pre class="language-javascript"><code class="lang-javascript"><strong>
</strong><strong>const otherUser = await minchat.fetchUser("example-username")
</strong><strong>
</strong></code></pre>

<pre class="language-javascript"><code class="lang-javascript"><strong>
</strong><strong>const otherUser = await minchat.fetchUserById("example-id")
</strong>
</code></pre>

### Updating a user

You can update an existing user's information

```javascript

const updatedUser = await minchat.updateUserById("example-user-id",
                              { 
                                  name: "Updated Name", 
                              })
                            
```

*You can view more details about the user parameters* [*here*](https://docs.minchat.io/reference/user)*.*

### Delete a user

Delete a user by username

```javascript
const success = await minchat.deleteUser(otherUser.username)
```

Or delete a user by user id

```javascript
const success = await minchat.deleteUserById(otherUser.id)
```

### Start One-to-One Conversation

```javascript
const chat = minchat.chat(otherUser.username, { metadata })
```

<table><thead><tr><th width="143">Field</th><th width="155">Type</th><th width="102">State</th><th>Description</th></tr></thead><tbody><tr><td><code>username</code></td><td><code>string</code> </td><td><em>required</em></td><td>The username of the user to start a conversation with. (<strong>note</strong>: this user must already be created)</td></tr><tr><td><code>metadata</code></td><td><code>json object</code></td><td><em>optional</em></td><td>an optional key value pair for any additional chat information. Accepts string, number and boolean values</td></tr></tbody></table>

### Start Group Chat

```javascript
const chat = await minchat.groupChat({
                 name: "Epic Group Chat",
                 memberUsernames: [ otherUser.username, thirdUser.username ],
                 avatar: "exampleavatar.com",
                 metadata: {}
 })
```

<table><thead><tr><th width="201">Field</th><th width="166">Type</th><th width="107">State</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td><em>optional</em></td><td>The name of the group chat.</td></tr><tr><td><code>memberUsernames</code></td><td><code>string</code></td><td><em>required</em></td><td>username list of participants of the group chat.</td></tr><tr><td><code>avatar</code></td><td><code>string | file</code></td><td><em>optional</em></td><td>the avatar of the group chat</td></tr><tr><td><code>metadata</code></td><td><code>json object</code></td><td><em>optional</em></td><td>an optional key value pair for any additional chat information. Accepts string, number and boolean values</td></tr></tbody></table>