# @pingfan.ts/emoji-picker

> emoji picker

Latest version **1.0.2** (published 2022-04-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install @pingfan.ts/emoji-picker
pnpm add @pingfan.ts/emoji-picker
yarn add @pingfan.ts/emoji-picker
bun add @pingfan.ts/emoji-picker
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-04-01 |
| First published | 2022-03-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 104.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | yanthink |
| Maintainers | yanthink |
| Keywords | react, emoji, picker, pannel, emoji-toolkit, emojione |

## Links

- npm: https://www.npmjs.com/package/@pingfan.ts/emoji-picker
- Repository: https://github.com/yanthink/pingfan.ts
- Homepage: https://github.com/yanthink/pingfan.ts#readme
- Issues: https://github.com/yanthink/pingfan.ts/issues
- npm.io page: https://npm.io/package/@pingfan.ts/emoji-picker

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^17.0.2
- [store](https://npm.io/package/store.md) ^2.0.12
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [emoji-toolkit](https://npm.io/package/emoji-toolkit.md) ^6.6.0
- [react-virtualized](https://npm.io/package/react-virtualized.md) ^9.22.3

## 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

- 1.0.2 (latest) — 2022-04-01
- 1.0.0 — 2022-03-31

## README

## React Emoji Picker

基于 [emoji-toolkit](https://github.com/joypixels/emoji-toolkit) 实现的 emoji picker

![截图](https://yanthink.github.io/pingfan.ts/images/emoji-picker.png)

[使用文档](https://yanthink.github.io/pingfan.ts/#/emoji-picker)

### 安装

    npm install -S @pingfan.ts/emoji-picker

### 使用

```jsx
import React, { useState } from 'react';
import type { EmojiItemProps } from '@pingfan.ts/emoji-picker/es/EmojiItem';
import EmojiPicker from '@pingfan.ts/emoji-picker';
import emojiToolkit from 'emoji-toolkit';
import 'emoji-assets/sprites/joypixels-sprite-32.min.css'; // 需要安装 emoji-assets@^6.6.0
import './index.css';

// 全局设置
emojiToolkit.sprites = true; // sprites = true 需要安装 emoji-assets@^6.6.0 依赖并引入 emoji-assets 对应的 css 样式
emojiToolkit.spriteSize = '32';

function App() {
  const [emoji, setEmoji] = useState<EmojiItemProps['emoji']>();
  console.info(emoji);

  return (
    <div className="container">
      <EmojiPicker
        // sprites = true 需要引入 emoji-assets 对应的 css 样式
        emojiToolkit={{ sprites: true, spriteSize: '32' }}
        onSelect={setEmoji}
        // 启用搜索，搜索规则是 匹配 shortname、shortname_alternates、ascii 和 keywords 字段
        search
      />
      {emoji && (
        <div className="preview">
          <div>shortname：{emoji.shortname}</div>
          <div>unicode：{emojiToolkit.shortnameToUnicode(emoji.shortname)}</div>
          <div>
            emoji：
            <span
              dangerouslySetInnerHTML={{ __html: emojiToolkit.shortnameToImage(emoji.shortname) }}
            />
          </div>
        </div>
      )}
    </div>
  );
}

export default App;
```

### API

| 属性名 | 描述 | 类型 | 默认值	|
| --- | --- | --- | --- |
| categories | Emoji 分类 | `Categories` | -- |
| emojiToolkit | [emoji-toolkit 选项](https://github.com/joypixels/emoji-toolkit/blob/master/USAGE.md) ，不影响全局设置 | `EmojiItemProps['emojiToolkit']` | -- |
| recentCount | 常用表情个数 | `number` | 36 |
| size | 网格大小 | `number` | 40 |
| showColCount | 显示列数 | `number` | 9 |
| showRowCount | 显示行数 | `number` | 6 |
| search | 启用搜索，搜索规则是匹配 shortname、shortname_alternates、ascii 和 keywords 字段 | `boolean` | -- |
| onSelect | 选择 emoji 表情时回调 | `(emoji: EmojiItemProps['emoji']) => void` | -- |
| renderHeader | 自定义头部 | `(activeCategory: Category) => React.ReactNode` | -- |

#### 默认 Emoji 分类

```ts
const defaultCategories: Categories = [
  {
    category: 'recent',
    title: '常用',
    shortname: ':clock3:',
  },
  {
    category: 'people',
    title: '表情符号与人物',
    shortname: ':smile:',
  },
  {
    category: 'nature',
    title: '动物与自然',
    shortname: ':hamster:',
  },
  {
    category: 'food',
    title: '食物与饮料',
    shortname: ':pizza:',
  },
  {
    category: 'activity',
    title: '活动',
    shortname: ':soccer:',
  },
  {
    category: 'travel',
    title: '旅行与地点',
    shortname: ':earth_americas:',
  },
  {
    category: 'objects',
    title: '物体',
    shortname: ':bulb:',
  },
  {
    category: 'symbols',
    title: '符号',
    shortname: ':symbols:',
  },
  {
    category: 'flags',
    title: '旗帜',
    shortname: ':flag_cn:',
  },
];
```

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