React-emoji-popup-lister NPM

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: :cool:

⌨️ Install

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 (
    <EmojiPopup
      listMax={40}
      maxHeight="200px"
      maxWidth="300px"
      placeholder="Add a profile description"
      theme="light"
      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 (
    <input
      // Required. Anything after is optional, and will override values
      {...props}
      // Override or extend default values
      className="your-class-name"
      placeholder="Your placeholder text"
      style={{ ...props.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"}}>
      <EmojiPopup
        input={Input}
        value={text}
        setValue={setText}
        onChange={handleChange}
      >
        <div>Child content...</div>
      </EmojiPopup>
    </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