Skip to content

shenqil/react-im-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
shenqi.lv
Apr 11, 2022
d280826 · Apr 11, 2022

History

76 Commits
Feb 24, 2022
Apr 11, 2022
Mar 18, 2022
Apr 11, 2022
Mar 18, 2022
Feb 24, 2022
Feb 24, 2022
Mar 18, 2022
Mar 8, 2022
Mar 24, 2022
Feb 24, 2022
Apr 11, 2022
Feb 24, 2022
Feb 24, 2022
Mar 8, 2022
Mar 18, 2022
Mar 7, 2022

Repository files navigation

已支持的功能

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

地址

-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()}
          >
            发送
          </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)
  • 构造一个FilePayload

  • 调用insertImg方法即可

  • localPath: electron 可以传入的本地图片地址

  • fileUrl:electron 可以传入的网络图片地址

  • file:web 传入的File文件对象


7.输入框显示文件

  • 外面插入,调用 insertFile方法

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

About

适用于ReactIM全功能输入框

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published