# italent-emoji

> ## 示例 1-使用默认表情

Latest version **3.0.8** (published 2019-10-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install italent-emoji
pnpm add italent-emoji
yarn add italent-emoji
bun add italent-emoji
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.8 |
| Published | 2019-10-08 |
| First published | 2018-11-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |
| Keywords | react, emoji, styled-component |

## Links

- npm: https://www.npmjs.com/package/italent-emoji
- Repository: git@gitlab.beisencorp.com:liguoming/italent-emoji
- npm.io page: https://npm.io/package/italent-emoji

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.8 (latest) — 2019-10-08
- 3.0.7 — 2019-09-12
- 3.0.6 — 2019-09-12
- 3.0.5 — 2019-09-05
- 3.0.4 — 2019-09-04
- 3.0.3 — 2019-08-29
- 3.0.2 — 2019-06-17
- 3.0.1 — 2019-04-16
- 1.0.9 — 2019-02-24
- 1.0.8 — 2019-02-24
- 2.0.2 — 2019-02-20
- 2.0.1 — 2019-02-19
- 1.0.7 — 2018-12-03
- 1.0.6 — 2018-12-03
- 1.0.5 — 2018-11-29
- … 5 more at https://npm.io/package/italent-emoji/versions

## README

# italent 表情组件

## 示例 1-使用默认表情

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

```shell
  npm install italent-emoji --save
```

```js
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 的根元素考虑进去。

---
_Source: https://npm.io/package/italent-emoji · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._