# react-chat-screen

> ![demo](/assets/demo.gif)

Latest version **0.1.9** (published 2020-03-27) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2020-03-27 |
| First published | 2020-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 24 |
| Unpacked size | 5.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | yasimba |

## Links

- npm: https://www.npmjs.com/package/react-chat-screen
- Repository: https://github.com/yasimba/react-chat-screen
- npm.io page: https://npm.io/package/react-chat-screen

## Dependencies (24)

- [react](https://npm.io/package/react.md) ^16.13.0
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [fsevents](https://npm.io/package/fsevents.md) ^2.1.2
- [node-sass](https://npm.io/package/node-sass.md) ^4.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.0
- [css-loader](https://npm.io/package/css-loader.md) ^3.4.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.9.0
- [react-redux](https://npm.io/package/react-redux.md) ^7.1.3
- [sass-loader](https://npm.io/package/sass-loader.md) ^8.0.2
- [babel-loader](https://npm.io/package/babel-loader.md) 8.0.6
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.28
- [react-scripts](https://npm.io/package/react-scripts.md) 3.4.0
- [@chakra-ui/core](https://npm.io/package/@chakra-ui/core.md) ^0.6.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^10.0.27
- [emotion-theming](https://npm.io/package/emotion-theming.md) ^10.0.27
- [@reduxjs/toolkit](https://npm.io/package/@reduxjs/toolkit.md) ^1.1.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.1.2
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.9.0
- [react-chat-screen](https://npm.io/package/react-chat-screen.md) ^0.1.8
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.9.4
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^9.3.2
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^4.2.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^7.1.2

## Recent versions

- 0.1.9 (latest) — 2020-03-27
- 0.1.8 — 2020-03-27
- 0.1.7 — 2020-03-27
- 0.1.6 — 2020-03-27
- 0.1.5 — 2020-03-27
- 0.1.4 — 2020-03-27
- 0.1.3 — 2020-03-27

## README

To view in visual studio - command+shift+v (Mac)


### `SIMPLE DEMO`
![demo](/assets/demo.gif)


## Extremely Customizable
![demo2](/assets/demo2.gif)

## Widget Support
![demo3](/assets/demo3.png)



### `INSTALLATION`
- `npm install react-chat-screen`
- `yarn add react-chat-screen`


### `QUICKSTART`
```javascript
import React, { useState, useEffect } from 'react';
import  ChatScreen  from 'react-chat-screen';


function Example(){
    const[messageList, setMessageList] = useState([])
    const[msg, setMsg] = useState('')
    useEffect(()=> {        
        let authorObj = {
            author: 'self',
            type: 'text',
            data: { 
                text: 'hi'
             }
        }
        setMessageList(messageList => [...messageList,  authorObj]);        
    }, [])
 

    const onSend = () => {    
        let authorObj = {
            author: 'other',
            type: 'text',
            data: { 
                text: msg
             }
        }      
        setMessageList(messageList => [...messageList,  authorObj]);
        setMsg('')        
    }
    return (
        <div >     
         <ChatScreen            
            messageList={messageList}
            onSend={onSend}
            sendLabel={true}
            isWidget = {false}
            otherBgColor="lime"            
            value = {msg}
            onChange = {(e)=> setMsg(e.target.value)}       
        />
        </div>
    ) 
}

export default Example;
```

### `Plenty of props to play with!`
```javascript 
    <ChatScreen            
            messageList={[]}
            onSend={()=>{}}
            sendLabel={false}
            isWidget = {false}
            otherBgColor={""}    
            selfBgColor={""}    
            headingBgColor={""}    
            errorBorderColor={""}
            focusBorderColor={""}
            value = {""}
            sendLabel={""}
            sendBtnColor={""}
            onChange = {()=>{}}       
        />
```


### `ROADMAP`
- [ ] Add more tests
- [ ] Add emoji support
- [ ] Add is-typing feature
- [ ] Add slack-like unread messages


### `CONTRIBUTING`
- Pull requests and Contributions are Welcome!
- `yarn test`

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