用 React.js 做的仿微信/小程序 Emoji 表情组件

yarn add react-wechat-emoji

import React, { useState } from 'react'
import { Emoji, ContentWithEmoji, parseEmoji } from 'react-wechat-emoji'

function App () {
  const [text, setText] = useState('')

  const testText = '你好，世界[微笑]'
  const contents = parseEmoji(testText)
  console.log(contents)
  /** 打印结果：
   *   contents = [
   *     { type: 1, content: "你好，世界", imageClass: "" },
   *     { type: 2, content: "[微笑]", imageClass: "smiley_0" },
   *   ];
   *  */

  return (
    <div>
      输入一些东西并点击下方表情窗口的任意表情：
      <input
        type='text'
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <div>
        <Emoji
          recentUsed={[
            {
              cn: '[鸡]',
              code: '',
              hk: '[小雞]',
              id: 214,
              style: 'e2_14',
              us: '[Chick]',
              web_code: ''
            }
          ]}
          source='https://dev.azure.com/hexuhua/f6126346-6e87-4d62-aa80-ff9b88293af0/_apis/git/repositories/ebd79495-5cbb-4565-8573-fa73ee451b5e/items?path=/github.com/hexh250786313/blog/14/xuebi.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=main&resolveLfs=true&%24format=octetStream&api-version=5.0'
          height={300}
          insertEmoji={(emojiText, recentUsed) => {
            setText(text + emojiText)
            console.log({ recentUsed })
          }}
        />
      </div>
      <p style={{ margin: '20px 0 0 0' }}>将会显示你的输入值和解析表情图片：</p>
      <div style={{ backgroundColor: '#eee', padding: 10 }}>
        <ContentWithEmoji
          source='https://dev.azure.com/hexuhua/f6126346-6e87-4d62-aa80-ff9b88293af0/_apis/git/repositories/ebd79495-5cbb-4565-8573-fa73ee451b5e/items?path=/github.com/hexh250786313/blog/14/xuebi.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=main&resolveLfs=true&%24format=octetStream&api-version=5.0'
          emojiScale={0.5}
          content={text}
        />
      </div>
    </div>
  )
}

export default App

const textType = {
  normal: 1,
  emoji: 2
}

const emoji = {
  id: 0,
  cn: "[微笑]",
  hk: "[微笑]",
  us: "[Smile]",
  code: "/::)",
  web_code: "/微笑",
  style: "smiley_0",
};

type EmojiContentType = {
  type: typeof textType.normal | typeof textType.emoji;
  content: string;
  imageClass: string;
};

function parseEmoji(content: string): EmojiContentType[];

git clone https://github.com/hexh250786313/react-wechat-emoji.git
cd react-wechat-emoji
yarn && yarn start