# React Emoji Popup Lister
> Slack-lick emoji list and select via keyboard
[](https://www.npmjs.com/package/react-emoji-popup-lister)
## π About
Type and insert emojis within your inputs, via their shortcode values. Written in Typescript.
`:cool:` :cool:
## β¨οΈ Install
β [ESM only package](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)
```bash
npm i -s react-emoji-popup-lister
```
## π Usage
### 1. Basic
```jsx
import EmojiPopup from "react-emoji-popup-lister"
export default function ExampleA () {
return
}
```
### 2. Custom styling with props
```jsx
import EmojiPopup from "react-emoji-popup-lister"
export default function ExampleB () {
return (
);
}
```
### 3. Provide an input component, state, and events from your parent component
Also wrap in a container div, to align the input and popup
```tsx
import { useState, useEffect } from "react";
import EmojiPopup from "react-emoji-popup-lister"
// Your input with props passed, including input value state
function Input (props: any) {
useEffect(() => { }, [props.value]);
return (
);
}
// Parend component with state, passed input, events, etc.
export default function ExampleC () {
const [text, setText] = useState("");
useEffect(() => { }, [inputText]);
const handleChange = function (e: React.ChangeEvent) { };
return (
{/* Container to align input and popup together */}