# react-chat-awesome

> Configurable react chat widget

Latest version **1.0.1** (published 2018-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-chat-awesome
pnpm add react-chat-awesome
yarn add react-chat-awesome
bun add react-chat-awesome
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-07-19 |
| First published | 2018-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 41.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | sPavl0v |
| Maintainers | serhiy_pavlov |
| Keywords | react, chat, chat-ui, reactjs, react-chat-awesome, react-component, chat-component, react-chat, react-widget, react-chat-component, chat-widget, react-chat-widget, javascript |

## Links

- npm: https://www.npmjs.com/package/react-chat-awesome
- Repository: https://github.com/sPavl0v/react-chat-awesome
- Homepage: https://github.com/sPavl0v/react-chat-awesome#readme
- Issues: https://github.com/sPavl0v/react-chat-awesome/issues
- npm.io page: https://npm.io/package/react-chat-awesome

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.4.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-07-19
- 1.0.0 — 2018-07-19

## README

# react-chat-awesome

### Fully configurable and customizable chat component for your React applications. 

## Advantages

- 100% Customizable
- Props for styles customization
- Lightweight (only react and prop-types as deps)
- Message validation included
- Backend agnostic
- In active development

## Comming in new versions:

- emoji picker
- sending files and images

## [Demo] Coming soon...

## Table of Contents
- [Installation](#installation)
- [Example](#example)
- [API](#api)

## Installation

The package can be installed via NPM:

```
npm install react-chat-awesome --save
```

Or YARN:

```
yarn add react-chat-awesome --save
```

## Example

``` javascript
import React, { Component } from 'react'
import { ChatAwesome } from 'react-chat-awesome'

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      history: []
    }

    this.sender = { id: 1 };
    this.receiver = { id: 2, imageUrl: 'path/to/source' };

    this.onSendMessageClick = this.onSendMessageClick.bind(this);
  }

  onSendMessageClick(msgText) {
    this.setState({ history: [...this.state.history, {
      id: +new Date(),
      msg: {
        type: 'text',
        text: msgText
      },
      userID: this.sender.id
    }]})
  }

  render() {
    return (
      <div>
        <ChatAwesome
          history={ this.state.history }
          sender={ this.sender }
          receiver={ this.receiver }
          onSendMessageClick={ this.onSendMessageClick }
        />
      </div>
    );
  }
}

```
## API

`ChatAwesome` is the only component you need to import.
`*` - required prop

ChatAwesome props:

|prop | type   | description |
|-----|--------|---------------|
| *sender | object | person who interacts with the UI and types the message.|
| *receiver | object | person who receives the messages and send responses to sender |
| history | message[] | array of messages |
| onSendMessageClick | function | callback function, executes when user send the message |
| onMessageChange | function | callback function, executes when user type something |
| onChatClose | function | callback on close button click |
| onChatOpen | function | callback on open button click |
| isOpen | boolean | programatically close/open chat (default false)
| showReceiverImageOnMessage | boolean | set if image should be displayed near each receiver message |
| sendMessageIcon | string | url for alternative icon |
| wrapperStyles | object | |
| headerStyles | object | styles for chat header |
| sendButtonStyles | object | styles for send button(not icon) |
| bodyStyles | object | styles for messages wrapper |
| footerStyles | object | styles for wrapper of the input field and chat button
| inputStyles | object | styles for input field |
| closedChatStyles | object | styles for closed chat button
| headerNameStyles | object | styles for receiver name at the header

## Interfaces

### Sender
``` javascript
{
  id: number | string; // required
}
```

### Receiver
``` javascript
{
  id: number | string; // required 
  imageUrl: string;
}
```
### Message
``` javascript
{
  id: number | string;
  userID: number | string;
  msg: {
    type: string;
    text: string;
  }
}
```

---
_Source: https://npm.io/package/react-chat-awesome · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._