https://github.com/brianhung/emojipicker
👋 twitter emoji picker written in react
https://github.com/brianhung/emojipicker
emoji-picker react twemoji
Last synced: 3 months ago
JSON representation
👋 twitter emoji picker written in react
- Host: GitHub
- URL: https://github.com/brianhung/emojipicker
- Owner: BrianHung
- Created: 2020-08-14T21:51:49.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-12-11T10:56:14.000Z (almost 4 years ago)
- Last Synced: 2025-03-13T10:38:13.814Z (7 months ago)
- Topics: emoji-picker, react, twemoji
- Language: TypeScript
- Homepage: https://brianhung.github.io/EmojiPicker
- Size: 3.15 MB
- Stars: 43
- Watchers: 1
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
To do this, we virtualize emoji elements with [`react-window`](https://github.com/bvaughn/react-window)
and [`react-window-infinite-loader`](), meaning elements are not rendered into the DOM until they
are visible through the scroll viewport. This allows [`react-twemoji-picker`](https://github.com/BrianHung/EmojiPicker) to be used with input or contenteditable components which require fast responsivity.
Original svg sources for emoji spritesheet comes from Twitter's [`twemoji`](https://github.com/twitter/twemoji) library. 😊
## Installation
```bash
npm install --save github:brianhung/emojipicker
```
## Usage
```js
import { EmojiPicker } from 'react-twemoji-picker';
import EmojiData from "react-twemoji-picker/data/twemoji.json";
import "react-twemoji-picker/dist/EmojiPicker.css"
const emojiData = Object.freeze(EmojiData);
const handleEmojiSelect = (emoji: EmojiObject) => console.log(emoji);
```
If you want to programatically get or set internal state (e.g. `search`), you have to use `EmojiPickertRef`
since `EmojiPicker` is a functional component. As an example,
```jsx
import { EmojiPicker, EmojiPickerRef } from 'react-twemoji-picker';
const ref = React.createRef()
const handleSearch = (query: string) => ref.current.search(query);
handleSearch(event.target.value)} placeholder="search">
```
To see an example, look at the source code for the demo.
### Props
| prop | default | description |
|:-----|:--------|:------------|
| emojiData: Record | `{}` | map of categories to list of emoji objects |
| emojiSize?: number | `36` | pixel size of an emoji |
| numberScrollRows?: number | `12` | number of rows in the scroll element |
| onEmojiSelect?: (emoji: EmojiObject, event: KeyboardEvent | MouseEvent) => void, | `(emoji: EmojiObject) => console.log(emoji)` | handle emoji click or enter key here |
| showNavbar?: boolean; | `false` | allows navigation to categories |
| showFooter?: boolean; | `false` | show focused emoji and its name |
| showScroll?: boolean; | `true` | turn off if query is always not null |
| emojisPerRow?: number; | `9` | number of emojis to show per row |
| onKeyDownScroll?: Function; | `(event) => null` | handle additional key events like 'ctrl-c' here |
| collapseCategoriesOnSearch?: boolean; | `true` | merge categories into single 'search results' category |
| collapseHeightOnSearch?: boolean; | `true` | scroll height changes with number of emojis |
| theme?: "system", "light", "dark" | `"system"` | css theme |
