@shen9401/react-im-input NPM

已支持的功能

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

地址

安装

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

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

显示效果

使用

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.多会话，输入框内容缓存

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)