React Emoji Picker

A simple and useful emoji-picker without much configurations 😎.

You can try to play with the configurations from this Demo Project.

Installation

You can install it with either

npm install @yosefbeder/react-emoji-picker

or

yarn add @yosefbeder/react-emoji-picker

Usage

To start using the component you shouldn't add any configs except onEmojiClick.

Most of the configs focuses on customizing the way it looks (You can play with then from here).

import React from 'react';
import EmojiPicker from '@yosefbeder/react-emoji-picker';

const App = () => {
	const [emoji, setEmoji] = useState('');

	return (
		<div>
			<EmojiPicker onEmojiClick={emojiObj => setEmoji(emojiObj.emoji)} />
		</div>
	);
};

Configurations

Types

type Theme = 'light' | 'dark';

type Size = 'sm' | 'med' | 'lg';

type Category =
	| 'recently-used'
	| 'smileys_people'
	| 'animals_nature'
	| 'food_drink'
	| 'travel_places'
	| 'activities'
	| 'objects'
	| 'symbols'
	| 'flags';

interface EmojiObj {
	emoji: string;
	name: string;
	skinTone: number;
}

Props

| Name | Type | Default Value | Required? | Description | | ----------------- | ---------- | ------------- | --------- | -------------------------------------------------------------------------------------- | | theme | String | 'light' | No | Of the type Theme. | | size | String | 'med' | No | Of the type Size. | | style | Object | undefined | No | Overrides the styles of the container and it's useful for positioning. | | autoFocus | Boolean | true | No | Focuses the searching bar when the component is mounted. | | defaultSkinTone | Number | 0 | No | The selected skin tone when the component is mounted, It can be a number between 0 & 6 | | exclude | Array | [] | No | The categories that will be excluded, It's an array of Category. | | onEmojiClick | Function | undefined | Yes | This passes EmojiObj to you as an argument. |

Notes

• This component library depends on the rem unit so please don't change the font size of the root element in your app or the sizes will be broken.
• If you find any bug send me and email from here.
• This is an open-source library you can help me improving it or just see the code from here.
• This is my third real project with react so it may not be so good, but I've done my best over the last week to make it like this if you want to see my other projects check my github account from here.

License

MIT License

Copyright (c) 2021 yosefbeder