react-wechat-emoji

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

Install

yarn add react-wechat-emoji

Usage

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://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/28ff7eab6bb10c9039509d2c8e52a7416174582c.png'
          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://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/28ff7eab6bb10c9039509d2c8e52a7416174582c.png'
          emojiScale={0.5}
          content={text}
        />
      </div>
    </div>
  )
}

export default App

Components

types

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;
};

Emoji props

| prop | default | type | description | | :---------: | :---------------: | :----------------------------------------------------------: | ------------------------------------------------------------ | | height | 300 | number | Emoji 面板高度 | | insertEmoji | none | (emojiText: string, recentUsed?: Array<typeof emoji>) => void | 点击表情的回调，参数一是点击的 emoji text，参数二是最近使用表情（如果有开启最近使用功能的话） | | source | bilibili 图床地址 | string | Emoji 雪碧图地址，强烈建议使用自己的 CDN 地址，默认是 bilibili 图床地址，稳定性未知 | | recentUsed | none | Array<typeof emoji> | 最近使用表情，参数仅用作初始化，无初始值传空数组；想关闭此功能则不传此参数 |

ContentWithEmoji props

| prop | default | type | description | | :--------: | :---------------: | :--------------------------------: | ------------------------------------------------------------ | | content | none | string \| Array<EmojiContentType> | 内容 | | bodyStyle | none | React.CSSProperties | 外层样式 | | textStyle | none | React.CSSProperties | 文本样式 | | emojiScale | 0.5 | number | 表情的显示大小 | | source | bilibili 图床地址 | string | Emoji 雪碧图地址，强烈建议使用自己的 CDN 地址，默认是 bilibili 图床地址，稳定性未知 |

表情雪碧图

强烈建议使用自己的 CDN 地址，默认是 bilibili 图床地址，稳定性未知。右键保存下方的图片到你的 CDN，组件的 source 填上你的 CDN 地址

Api

parseEmoji

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

Dev

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

LICENSE

MIT