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下的图标尺寸,详见示例