已支持的功能

• Emoji 表情插入到輸入框中顯示
• @成員彈出，以及在輸入框高亮提示
• 多會(huì)話，輸入框內(nèi)存緩存
• 支持圖片插入，拖拽到輸入框中顯示
• 支持文件插入，拖拽到輸入框中顯示

地址

-git地址
-演示地址
-issues

安裝

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

• @成員支持模糊搜索，依賴pinyin-match

顯示效果

image.png

使用

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()}
          >
            發(fā)送
          </div>
      </div>

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

1.Emoji 功能

• 直接調(diào)用內(nèi)部方法 imInputRef.current?.insertEmoji(item);item 滿足 { key:string, data:base64 }結(jié)構(gòu)

2.@成員功能

• props 傳入 memberList 滿足 [{ id:string,name:string, avatar:string}]結(jié)構(gòu)

3.發(fā)送消息

• props 傳入sendMsg,按Enter鍵，或者調(diào)用imInputRef.current?.sendMsg(),會(huì)觸發(fā)sendMsg回調(diào)

4.直接操作InnerHTML

• imInputRef.current?.setInnerHTML 直接覆蓋輸入框的內(nèi)容
• imInputRef.current?.getInnerHTML 獲取輸入框的原生內(nèi)容

5.多會(huì)話，輸入框內(nèi)容緩存

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

• 切換props上的inputId,會(huì)緩存上一次id的輸入框內(nèi)容，從而回到上一次inputId時(shí)，內(nèi)容能還原
• 清空指定inputId的緩存，clearCache('inputId')
• 清空所有緩存,clearCache(undefined)

6.輸入框顯示圖片

6.1 拖拽圖片進(jìn)入輸入框

• 直接拖入圖片到輸入框內(nèi)部，即可自動(dòng)展示

6.2外部插入圖片到輸入框

    const filePayload:IFilePayload = {
      fileRealName: file.name,
      fileSize: file.size,
      type: file.type,
      localPath: (file as any).path, // electron 擴(kuò)展屬性
      file,
    };

    imInputRef.current.insertImg(filePayload)

• 構(gòu)造一個(gè)FilePayload

• 調(diào)用insertImg方法即可

• localPath: electron 可以傳入的本地圖片地址

• fileUrl:electron 可以傳入的網(wǎng)絡(luò)圖片地址

• file:web 傳入的File文件對(duì)象

7.輸入框顯示文件

• 外面插入，調(diào)用 insertFile方法

• 其他使用與圖片的使用方式相似