本文已参与「新人创作礼」活动,一起开启掘金创作之路。
简介
博客项目重构后留言和评论功能一直没有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(){} |