italent-emoji

内置表情使用了动态 import(), 所以在项目构建的时候请保证构建工具支持通过 import('xxx')导入模块

Usage no npm install needed!

<script type="module">
  import italentEmoji from 'https://cdn.skypack.dev/italent-emoji';
</script>

README

italent 表情组件

示例 1-使用默认表情

内置表情使用了动态 import(), 所以在项目构建的时候请保证构建工具支持通过 import('xxx')导入模块

  npm install italent-emoji --save
import React from "react";
import { render } from "react-dom";
import styled from "styled-components";
import Emoji from "../../src/italent-emoji";

const abs = `position:absolute`;

const EmojiLeftTop = styled.div`
  ${abs};
  left: 20px;
  top: 20px;
`;

const EmojiRightTop = styled.div`
  ${abs};
  right: 20px;
  top: 20px;
`;

const EmojiLeftBottom = styled.div`
  ${abs};
  left: 20px;
  bottom: 20px;
`;

const EmojiRightBottom = styled.div`
  ${abs};
  right: 20px;
  bottom: 20px;
`;

class Example extends React.Component {
  getData() {
    return import("./data/italent.json");
  }
  render() {
    return (
      <div>
        <EmojiLeftTop>
          {/**使用自定义数据 */}
          <Emoji getData={this.getData}>Left Top</Emoji>
        </EmojiLeftTop>
        <EmojiRightTop>
          {/**当点击的时候获取当前点击的表情数据 */}
          <Emoji onSelect={console.log} getData={this.getData}>
            right Top
          </Emoji>
        </EmojiRightTop>
        <EmojiLeftBottom>
          <Emoji
            getData={this.getData}
            config={{
              meep: {
                rowSize: 7,
                imgSize: 46,
                cellSize: 61
              }
            }}
          >
            Left bottom
          </Emoji>
        </EmojiLeftBottom>
        <EmojiRightBottom>
          <Emoji getData={this.getData}>Right bottom</Emoji>
        </EmojiRightBottom>
      </div>
    );
  }
}

export default Example;

参数

className 给 emoji 添加一个自定义的 className

getData 自定义的表情数据,需要返回一个promise

onSelect 当点击一个表情的执行的回调,返回数据为 emojiItem {url, title}

config 配置一个tabs下的图标尺寸,详见示例

emoji 弹层的位置使用了 getBoundingClientRect 计算到 Emoji 的根元素的位置得出的,Emoji 的根元素是按钮的一部分,如果做定位的话,需要把 Emoji 的根元素考虑进去。