# react-chatflow

> [![npm version](https://img.shields.io/npm/v/react-chatflow.svg?style=flat)](https://www.npmjs.com/package/react-chatflow)

Latest version **1.0.17** (published 2018-08-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-chatflow
pnpm add react-chatflow
yarn add react-chatflow
bun add react-chatflow
```

## 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.17 |
| Published | 2018-08-13 |
| First published | 2018-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 53.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Danil Kochetov |
| Maintainers | dankochetov |

## Links

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

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5

## Recent versions

- 1.0.17 (latest) — 2018-08-13
- 1.0.16 — 2018-08-13
- 1.0.15 — 2018-08-13
- 1.0.14 — 2018-08-13
- 1.0.13 — 2018-08-13
- 1.0.12 — 2018-08-13
- 1.0.11 — 2018-08-13

## README

# React Chatflow
[![npm version](https://img.shields.io/npm/v/react-chatflow.svg?style=flat)](https://www.npmjs.com/package/react-chatflow)

React library that helps you to emulate a simple chatflow between a real user and a bot.

## Installation

Download the package:
```
npm install --save react-chatflow
```

## Basic usage

```jsx
import Chatflow from 'react-chatflow';

const messages = [
    {message: '- Conversation start -', from: 'system'},
    {message: "Josh, I need your email to register on our service", from: "bot"},
    {message: "sure", from: "user"},
    {message: "josh@email.com", from: "user"},
    {message: "thx, Josh", from: "bot"},
    {message: "and your phone number", from: "bot"},
    {message: '- Some system message again -', from: "system"},
    {message: "+47-JOSH-PHONE", from: "user"},
    {message: "great, thanks a lot", from: "bot"},
    {message: "have a nice day!", from: "bot"}
];

<Chatflow
    messages={messages}
/>
```

## Properties

| Property | Type | Default value | Description |
|:--------:|:----:|:-------------:|-------------|
| `messages` | array | - | Array of messages to display (see [message structure](#message-structure) for detailed info) |
| `width` | number | `300` | Width (in px) of chat area |
| `height` | number | `300` | Height (in px) of chat area |
| `typingDuration` | number | `1000` | Duration (in ms) while the typing indicator is shown for each message |
| `messageDelay` | number | `1500` | Delay (in ms) before each message is shown |
| `onInit` | function | - | Callback that is called with no params after the init |
| `autoPlay` | bool | `false` | If set to `true`, messages will start showing without the user interaction |
| `messageClassName` | string | - | Custom class name that will be added to each message |
| `leftMessageClassName` | string | - | Custom class that will be added to each message from the bot |
| `rightMessageClassName` | string | - | Custom class that will be added to each message from the real user |
| `systemMessageClassName` | string | - | Custom class that will be added to each message from the system |
| `messageTextClassName` | string | - | Custom class that will be added to the text of each message |
| `containerClassName` | string | - | Custom class that will be added to the chat container |
| `messageAvatarClassName` | string | - | Custom class name that will be added to each avatar |
| `typingIndicatorClassName` | string | - | Custom class name that will be added to the typing indicator |
| `typingIndicatorInnerClassName` | string | - | Custom class name that will be added to the inner part of the typing indicator |
| `startBtnClassName` | string | - | Custom class name that will be added to the button that starts the chatflow |

## Message structure

| Field | Type | Required | Description |
|:-----:|:----:|:--------:|-------------|
| `message` | string | **yes** | Displayed text |
| `from` | string | **yes** |<ul><li><code>user</code> - message from the real user, shown on the right</li><li><code>bot</code> - message from the bot, shown on the left</li><li><code>system</code> - system message, shown in the middle</li></ul> |
| `delay` | number | no | Custom delay (in ms) before this message is shown |
| `typingDuration` | number | no | Custom duration (in ms) while the typing indicator is shown for this message |

## Licence
MIT

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