带emoji表情的react输入框组件

原创已于 2022-05-20 17:47:53 修改 · 置顶 · 3.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #emoji #npm

于 2021-09-04 16:58:30 首次发布

网站开发专栏收录该内容

12 篇文章

订阅专栏

本文介绍了作者开发的一款React组件——react-emotor，用于实现输入框的emoji表情功能。组件提供了输入框和输出框两种形式，支持emoji表情的插入、删除和转换。用户可以通过npm或yarn安装，并在项目中方便地集成使用。文章还给出了详细的基本用法和API说明，以及使用时需要注意的事项，例如确保数据库编码为utf-8mb4。

简介

博客项目重构后留言和评论功能一直没有emoji表情输入功能，在网上也没有找到比较好用的react组件，于是作者用了两周时间封装了一个输入框组件并发布到npm。
项目上线初期或多或少存在一些问题，如果在使用过程中遇到bug或者在功能上有更好的建议意见请留言告知。

效果

示例图片
在线Demo请到西贝博客留言板页面体验

安装

npm install react-emotor

yarn add react-emotor

基本用法

输入框组件使用方法

输入框组件相对于普通的输入框添加了emoji表情输入功能，点击emoji表情后组件会将该emoji图片插入到输入框中并调用onChange函数向用户提供经过Unicode转码后的字符串，用户只需存储该字符串即可。

import React, { useRef } from 'react'
import { ReactEmojiEditor } from 'react-emotor'

const App = () => {
  // 创建ref用于接收编辑框组件的节点对象,
  const emotor = useRef();

  // 组件内容改变回调函数
  function contentOnChange(content) {
    console.log(content);
  }

  // 清空组件内容
  function myClean() {
    console.log("clean");
    emotor.current.clean();
  }

  // 组件获取焦点
  function myFocus() {
    console.log("onFocus");
    emotor.current.onFocus();
  }

  return (
    <div>
      <ReactEmojiEditor
        ref={emotor}
        className='myClassName'
        id="myEmotor"
        defaultValue='this is default value 😀😀😀'
        onChange={content => contentOnChange(content)}
      />
      <button onClick={myClean}>清空</button>
      <button onClick={myFocus}>聚焦</button>
    </div>
  )
}

export default App

输出框使用方法

输出框组件主要功能是将传入字符串中emoji表情转换成对应的表情图片并输出。

import React from 'react'
import { ReactEmojiShow } from 'react-emotor';

const App = () => {

  const content = '这是一段带😄😄😄emoji表情的文字';

  return (
    <ReactEmojiShow
      content={content}
    />
  )
}

export default App

注意事项

由于项目中emoji表情采用Unicode编码格式存储，因此使用组件前需要确保数据库编码格式为utf-8mb4。

API

ReactEmojiEditor

参数	说明	类型	默认值
width	组件宽度	string	100%
placeholder	编辑框默认内容	string	‘’
className	组件类名	string	‘’
id	组件输入框id（同页面多次引入组件时需要指定不同的id）	string	‘emotor’
defaultValue	组件默认显示的内容	string	‘’
onChange	内容改变时调用此函数	function(content)	function(){}