react-emoji-search

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #go #android #rust #macos #windows #awesome #awesome-list #pytorch #openai #open-source

react-emoji-search

(★ 9)

Emoji picker displayed just like Whatsapp.

react-emoji-search 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React emoji search

<div align="center">
Emoji picker displayed just like Whatsapp.

[Demo](https://moji-search.herokuapp.com/)
<br/><br/>
<a style="margin-right: 8px;" href="https://app.travis-ci.com/zeddz92/react-emoji-search"><img src="https://app.travis-ci.com/zeddz92/react-emoji-search.png?branch=main" alt="Build Status"></a><a style="margin-right: 8px;" href="https://snyk.io/test/github/zeddz92/react-emoji-search?targetFile=package.json"><img src="https://snyk.io/test/github/zeddz92/react-emoji-search/badge.svg?targetFile=package.json" alt="Build Status"></a><a href="https://codecov.io/github/zeddz92/react-emoji-search?branch=main"><img src="https://img.shields.io/codecov/c/github/zeddz92/react-emoji-search.svg?maxAge=2592000" alt="Build Status"></a>

</div>

### Features:

- Fully customizable
- Faster load for high quality emojis
- Emojis skin tones
- Recently used emojis support
- Emoji sets: `facebook`, `apple`, `google` and `twitter`
- `light` and `dark` mode

# Installation

```
npm install react-emoji-search
```

# Usage

## Emoji Picker

```javascript
import React from "react";
import { EmojiPicker, Emoji } from "react-emoji-search";

<EmojiPicker set="apple" emojiSize={24} emojiSpacing={8}/>
<EmojiPicker emojiVersion={12.0}/>
<EmojiPicker onEmojiClick={(emoji) => setEmoji(emoji)} />
<EmojiPicker
  styles={{
    backgroundColor: "#2e4960",
    indicatorColor: "#b04c2d",
    fontColor: "lightgrey",
    searchBackgroundColor: "#263d51",
    tabsFontColor: "#8cdce4",
    searchFontColor: "lightgrey",
    skinTonePickerBackgroundColor: "#284155",
  }}
/>
```

### Properties

#### Styling

You can make the picker adjust to your needs with the following props:

```js
// styles
{
  backgroundColor: "...",
  indicatorColor: "...",
  fontColor: "...",
  tabsFontColor: "...",
  searchFontColor: "...",
  variationPickerBackgroundColor: "...",
}
```

### Sprite Sheets

The sprite sheets comes from `jsDelivr` thanks to [emoji-datasource](https://www.npmjs.com/package/emoji-datasource) package.

You can check the used sprite sheets through these links:

- [apple](https://cdn.jsdelivr.net/npm/emoji-datasource-apple-split/img/)
- [facebook](https://cdn.jsdelivr.net/npm/emoji-datasource-facebook-split/img/)
- [twitter](https://cdn.jsdelivr.net/npm/emoji-datasource-twitter-split/img/)
- [google](https://cdn.jsdelivr.net/npm/emoji-datasource-google-split/img/)

## Emoji

Get emoji from native. This component will attempt to find
the emoji and render from the specified set. If not found it will render interrogation emoji (❓).

```javascript
import React from "react";
import { Emoji } from "react-emoji-search";

<Emoji unicode="✌🏽" />
<Emoji unicode="🥸" set="facebook" size={24} />
<Emoji unicode="👀" set="twitter" quality="256" />
```

### Properties

When you set styles, it will override `dark` and `light` mode colors

react-emoji-search

react-emoji-search 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-emoji-search

react-emoji-search 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README