npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@shen9401/react-im-input

v1.0.10

Published

React 全功能IM 输入框

Downloads

1

Readme

已支持的功能

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

地址

-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方法

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