TypeScript icon, indicating that this package has built-in type declarations

0.2.27 • Public • Published

React Emoji Popup Lister

Slack-lick emoji list and select via keyboard



📁 About

Type and insert emojis within your inputs, via their shortcode values. Written in Typescript.
:cool: 🆒

⌨️ Install

ESM only package

npm i -s react-emoji-popup-lister

🚀 Usage

1. Basic

import EmojiPopup from "react-emoji-popup-lister"

export default function ExampleA () {
  return <EmojiPopup />

2. Custom styling with props

import EmojiPopup from "react-emoji-popup-lister"

export default function ExampleB () {
  return (
      placeholder="Add a profile description"
      ariaLabel="Profile description input"

3. Provide an input component, state, and events from your parent component

Also wrap in a container div, to align the input and popup

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 (
      // Required. Anything after is optional, and will override values
      // Override or extend default values
      placeholder="Your placeholder text"
      style={{, width: "100%" }}

// 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 */}
    <div style={{ maxWidth: "400px", margin: "1rem auto 0"}}>
        <div>Child content...</div>

🗃️ Prop Options

All are optional

Prop Type Default Description
input input/textarea component <input> Pass your own input element or component
value useState string value "" Store state in your parent component
setValue useState function setState Set value from inside Emoji component
listMax number 6 Max number of emoji matches to display
theme string auto Popup display theme style. light dark auto
strict boolean true Strict mode will ignore a:b, 👋:ab
maxWidth number/string 400px Scroll container width cap
maxHeight number/string 250px Scroll container height cap
footer boolean true Display or hide footer info bar
placeholder string "" Input placeholder value
ariaLabel string "" Input aria-label value

🪅 Prop Events

Place on <EmojiPopup> component, Not your custom <input> - as this will override necessary events

Prop Description
onClick Input element Click event (* Not emoji list)
onChange Input value Change event
onKeyDown Input KeyDown event
onKeyUp Input KeyUp event
onFocus Input Focus event
onBlur Input Blur event

🗺️ Shortcuts

These will preventDefault in the input while the popup is active

Key Function
ArrowUp Up in emoji list
ArrowDown Down in emoji list
Home Start of emoji list
End End of emoji list
Enter or Tab Choose highlighted emoji

🏗️ Todo


  • Add CSS classes for user styling
  • Option to turn off Home/End shortcut
  • Option to replace full emoji string automatically (2 colons)
  • Add better positioning support


  • Cursor over list, while using keyboard navigation still triggers hover change
  • Deleting "combo" emojis on Firefox doesn't remove the entire emoji
  • Escape to hide gets reset on successive typing
  • Cursor changing caret position not triggering changes

🖊️ License

MIT © nicfontaine

Package Sidebar


npm i react-emoji-popup-lister

Weekly Downloads






Unpacked Size

53.9 kB

Total Files


Last publish


  • ngpfontaine