Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/arronhunt/react-native-emoji-selector

⚛️😎 Simple, customizable and theme-able Emoji selector for React Native
https://github.com/arronhunt/react-native-emoji-selector

emoji emoji-keyboard react react-native

Last synced: 5 days ago
JSON representation

⚛️😎 Simple, customizable and theme-able Emoji selector for React Native

Awesome Lists containing this project

README

        

# react-native-emoji-selector

![Image preview](./assets/cover.png)

## Installation

```
npm install --save react-native-emoji-selector
```

```
import EmojiSelector from 'react-native-emoji-selector'
```

## Demo

![Demo GIF](./assets/demo.gif)

## Usage

### Basic usage

```jsx
console.log(emoji)} />
```

### Setting a default category

If you'd like to define a different default category, you can import the `Categories` class. Setting a default category can also improve performance by loading a single section rather than all sections at once.

```jsx
import EmojiSelector, { Categories } from "react-native-emoji-selector";

console.log(emoji)}
/>;
```

The available categories are `all`, `emotion`, `people`, `nature`, `food`, `activities`, `places`, `objects`, `symbols`, and `flags`.

## Props

| Prop | Type | Default | Description |
| ----------------- | -------- | ------------- | -------------------------------------------------------- |
| onEmojiSelected | _func_ | | Function called when a user selects an Emoji |
| theme | _string_ | `"007AFF"` | Theme color used for loaders and active tab indicator |
| showTabs | _bool_ | `true` | Toggle the tabs on or off |
| showSearchBar | _bool_ | `true` | Toggle the searchbar on or off |
| showHistory | _bool_ | `false` | Toggle the history tab on or off |
| showSectionTitles | _bool_ | `true` | Toggle the section title elements |
| category | _enum_ | `"all"` | Set the default category. Use the `Categories` class |
| columns | _number_ | `6` | Number of columns accross |
| placeholder | _string_ | `"Search..."` | A string placeholder when there is no text in text input |
| shouldInclude | _func_ | | Function called to check for emoji inclusion |

## Contributors

Special thanks to everyone who has contributed to this project!

[![Victor K Varghese](https://avatars3.githubusercontent.com/u/15869386?s=80&v=4)](https://github.com/victorkvarghese)
[![Kubo](https://avatars3.githubusercontent.com/u/22464192?s=80&v=4)](https://github.com/ma96o)
[![Mateo Silguero](https://avatars3.githubusercontent.com/u/25598400?s=80&v=4)](https://github.com/mateosilguero)
[![Anastasiia Kravchenko](https://avatars3.githubusercontent.com/u/4223266?s=80&v=4)](https://github.com/St1ma)
[![Sindre](https://avatars3.githubusercontent.com/u/4065840?s=80&v=4)](https://github.com/sseppola)
[![Lucas Feijo](https://avatars3.githubusercontent.com/u/4157166?s=80&v=4)](https://github.com/lucasfeijo)