Embed A highly customizable chat in your React app
Tags: chat
Published: 2023-12-27 18:31:04

---
title: Embed A highly customizable chat in your React app
published: true
date: 2023-09-27 00:46:00 UTC
tags: Chat
canonical_url: https://reactjsexample.com/embed-a-highly-customizable-chat-in-your-react-app/
---

# react-chat-module

> ![Embed A highly customizable chat in your React app](https://reactjsexample.com/content/images/2023/09/Code_2023-09_21-41-41.jpg)
> 
> Embed an easy to use, highly customizable chat in your React app! Optimized for mobile and desktop applications. [Live Demo](http://projects.marius-butz.de/react-chat)

Bundled Size: <6KB

![Embed A highly customizable chat in your React app](https://user-images.githubusercontent.com/2772553/114227151-e14b5a00-9974-11eb-8ae5-fdf6d2d6603c.gif)

## Install

```
npm install --save react-chat-module
```

## Usage

```
import React, { useState } from 'react'

import { Chat, Message } from 'react-chat-module'
import 'react-chat-module/dist/index.css'

function Example() {

    const [messages, setMessages] = useState([
        {
            createdAt: new Date(Date.now()),
            messageId: "1",
            senderId: "1",
            profilePicture: "https://via.placeholder.com/150",
            type: "text",
            text: "Hello, how are you?",
            name: "John Doe"
        },
        {
            createdAt: new Date(Date.now() + 2000),
            messageId: "2",
            senderId: "2",
            profilePicture: "https://via.placeholder.com/150",
            type: "text",
            text: "I'm fine, and you?"
        },
    ]);

    // append user typed message to messages array
    const handleSend = (message: Message) => {
        setMessages([
            ...messages,
            {
                messageId: `${messageId}`,
                senderId: "1",
                profilePicture: "https://via.placeholder.com/150",
                type: message.type,
                text: message.text,
                createdAt: message.createdAt,
                read: false
            }
        ]);
    }

    return <Chat userId={"1"} messages={exampleMessages} onSend={handleSend} />
}
```

A full example can be found [here](https://github.com/Turtle-0201/react-chat-app/blob/master/example/src/App.tsx).

## Customization

| props | type | default | descriptions |
| --- | --- | --- | --- |
| loadingSpinner | `JSX.Element` | built in Loading spinner | Override the built in default Loading Spinner which is used while loading the attachment preview |
| buttons | [SendMessageButtons](https://github.com/Turtle-0201/react-chat-app/blob/master) | `undefined` | Override the built in buttons |
| customFactories | [CustomFactories](#custom-factories) | `undefined` | Extend or override the built in message type factories |
| disableAttachments | `boolean` | `false` | Remove the send attachment button and the functionality to send attachments |
| attachmentFileTypes | `Array<FileType>` | all available file types | Provide an array with a subset of available file types (e.g. only support uploading of images, videos and audio files) |
| isUploading | `boolean` | `false` | Display an upload indicator, useful while uploading an attachment |

### Custom factories

To override or extend the functionality of the existing message types, you can provide an object with React components, which will be used instead of the built-in ones. The only thing you have to do is, to provide an object with type names (typing, text, image, video, audio, file) and as value an object with a `hasText` element (renders `text` element of `ChatMessage`) and `factory` which is a reference to the component you want to render. The `ChatMessage` is provided as a prop `message`. The loading spinner (either custom or default one) is provided as the `loadingSpinner` prop and is useful when you want to hide loading of visuals (e.g. images).

### Custom factories with TypeScript

If you want to use TypeScript and add a new message type, you need to declare it first. You can simply use the following snippet to add a message type called `test`:

```
declare module "react-chat-module" {
    export interface MessageTypeMap {
        test: "test";
    }
}
```

## Types

### FileType

The type `FileType` is a union type consisting of “audio”, “video”, “image”, “document” and “any”. It’s used to describe the input file of an attachment.

### MessageType

Specifies the type of message. This union type consists per default of “typing”, “text”, “photo”, “video” and “file” and is extendable ([details](#custom-factories-with-typescript)).

### Message

Interface for a simple message and is provided from the `OnSend` callback.

```
export interface Message {
    createdAt: Date;
    type: MessageType;
    text?: string;
    attachment?: File;
}
```

### ChatMessage

Extends the `Message` interface:

```
export interface Message {
    messageId: string;
    senderId: string | number;
    profilePicture?: string;
    name?: string;
    photo?: string;
    video?: string;
    file?: FileMessage;
    read?: boolean;
    audio?: string;
}
```

Extendable like described earlier, if you need additional information for your custom message component.

### FileMessage

Type for providing messages of type `file`:

```
export interface FileMessage {
    fileType: string;
    fileName: string;
    file: string;
}
```

### SendMessageButtons

Replace the default send message buttons with custom JSX elements:

```
export interface SendMessageButtons {
    send: JSX.Element;
}
```

## Contribution

Feel free to submit PRs or open issues.

## License

MIT © [Marius Butz](https://github.com/mbpictures)

## GitHub

[View Github](https://github.com/Turtle-0201/rollup-plugin-commonjs?ref=reactjsexample.com)