# @shen9401/react-im-input

> React 全功能IM 输入框

Latest version **1.0.10** (published 2022-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @shen9401/react-im-input
pnpm add @shen9401/react-im-input
yarn add @shen9401/react-im-input
bun add @shen9401/react-im-input
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2022-04-11 |
| First published | 2022-03-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 4.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | shen9401 |
| Maintainers | shen9401 |
| Keywords | IM, Input |

## Links

- npm: https://www.npmjs.com/package/@shen9401/react-im-input
- Repository: https://github.com/shenqil/react-im-input
- Homepage: https://github.com/shenqil/react-im-input#readme
- Issues: https://github.com/shenqil/react-im-input/issues
- npm.io page: https://npm.io/package/@shen9401/react-im-input

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^17.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [pinyin-match](https://npm.io/package/pinyin-match.md) ^1.2.2

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2022-04-11
- 1.0.9 — 2022-03-24
- 1.0.8 — 2022-03-24
- 1.0.7 — 2022-03-24
- 1.0.6 — 2022-03-24
- 1.0.5 — 2022-03-18
- 1.0.3 — 2022-03-18
- 1.0.1 — 2022-03-17
- 1.0.0 — 2022-03-17
- 0.0.6 — 2022-03-17
- 0.0.4 — 2022-03-08
- 0.0.3 — 2022-03-07
- 0.0.2 — 2022-03-07
- 0.0.1 — 2022-03-07

## README

# 已支持的功能

- [x] Emoji 表情插入到输入框中显示
- [x] @成员弹出，以及在输入框高亮提示
- [x] 多会话，输入框内存缓存
- [x] 支持图片插入，拖拽到输入框中显示
- [x] 支持文件插入，拖拽到输入框中显示

# 地址

-[git地址](https://github.com/shenqil/react-im-input)
-[演示地址](https://shenqil.github.io/react-im-input/)
-[issues](https://github.com/shenqil/react-im-input/issues)

***

# 安装

```
npm i @shen9401/react-im-input pinyin-match 
```

- **@成员**支持模糊搜索，依赖`pinyin-match`

***

# 显示效果

![image.png](https://upload-images.jianshu.io/upload_images/25820166-c02a069f1544fcbe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***

# 使用

```
import ImInput from '@shen9401/react-im-input'

function App(){
  const [out,setOut] = useState<EMsgItem[]>([])
  const imInputRef = useRef<IIMRef>(null)
  const memberList = useMemberList()

  function sendMsg(list:EMsgItem[]){
    setOut(list)
  }

  function handleEmojiClick(item:IEmojiItem){
    imInputRef.current?.insertEmoji(item)
  }

  return (
    <div className='example'>

      <div className='example_tools'>
        <Emoji handleEmojiClick={handleEmojiClick}/>
      </div>

      <div className='example_input'>
        <IMInput 
          memberList={memberList as IMemberItem[]} 
          handleSend={sendMsg}  
          onRef={imInputRef}
        />
      </div>

      <div className="example_btn">
          <div
            className="example_btn--inner"
            aria-hidden="true"
            onClick={()=>imInputRef.current?.sendMsg()}
          >
            发送
          </div>
      </div>

      <ul className='example_out'>
        {out.map((item,index)=>
        (<li key={index}>
          {JSON.stringify(item)}
          </li>)
        )}
      </ul>
    </div>
    )
}

```

***

## 1.Emoji 功能

- 直接调用内部方法 `imInputRef.current?.insertEmoji(item)`;item 满足 `{ key:string, data:base64 }`结构

***

## 2.@成员功能

- props 传入 `memberList` 满足 `[{  id:string,name:string, avatar:string}]`结构

***

## 3.发送消息

- props 传入`sendMsg`,按Enter键，或者调用`imInputRef.current?.sendMsg()`,会触发`sendMsg`回调

***

## 4.直接操作InnerHTML

- `imInputRef.current?.setInnerHTML` 直接覆盖输入框的内容
- `imInputRef.current?.getInnerHTML` 获取输入框的原生内容

***

## 5.多会话，输入框内容缓存

```js
import {clearCache} from '@shen9401/react-im-input'
```

- 切换`props`上的`inputId`,会缓存上一次id的输入框内容，从而回到上一次`inputId`时，内容能还原
- 清空指定`inputId`的缓存，`clearCache('inputId')`
- 清空所有缓存,`clearCache(undefined)`

***

## 6.输入框显示图片

### 6.1 拖拽图片进入输入框

- 直接拖入图片到输入框内部，即可自动展示

### 6.2外部插入图片到输入框

```
    const filePayload:IFilePayload = {
      fileRealName: file.name,
      fileSize: file.size,
      type: file.type,
      localPath: (file as any).path, // electron 扩展属性
      file,
    };

    imInputRef.current.insertImg(filePayload)
```

- 构造一个`FilePayload`

- 调用`insertImg`方法即可
- `localPath`: **electron** 可以传入的本地图片地址
- `fileUrl`:**electron** 可以传入的网络图片地址
- `file`:**web** 传入的File文件对象

***

## 7.输入框显示文件

- 外面插入，调用 `insertFile`方法

- 其他使用与图片的使用方式相似

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