❤National Pizza Magistrate

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

    1.0.1 • Public • Published

    react-emoji-textarea 😆💖

    You can use Slack-like emoji shortcuts on textarea! 🦸‍♂️⌨️

    Image from Gyazo

    🛠️ Requirement

    💾 Installation

    Install the plugin via Yarn (recommended)

    yarn add @nikaera/react-emoji-textarea

    or via NPM

    npm i @nikaera/react-emoji-textarea

    🏃 Getting Started

    Include component

    import ReactEmojiTextArea from "@nikaera/react-emoji-textarea";

    Make some elegant textarea

      style={{ fontSize: "1em" }}
      onChange={(text) => console.log(text)}
      placeholder={"Try typing emoji like a Slack shortcut! 😆💖"}
        showSkinTones: true,

    🛠️ Configuring the plugin

    Props for ReactEmojiTextArea include the following, which you can customize as you see fit. 🤵

    export interface EmojiTextAreaProps {
      ref?: React.RefObject<HTMLTextAreaElement>;
      rows?: number;
      cols?: number;
      style?: React.CSSProperties;
      placeholder?: string;
      showPicker?: boolean;
      emojiPickerProps?: PickerProps;
      onClick?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
      onSuggesting?: (val: boolean) => void;
      onChange: (val: string) => void;
    Attribute Required Type Default Description
    ref - React.RefObject<HTMLTextAreaElement> null Use this when you want to refer to a textarea element.
    rows - number 3 Specifying rows for textarea.
    cols - number 40 Specifying cols for textarea.
    style - React.CSSProperties null Specifying the style of a textarea.
    placeholder - string null Specifying a placeholder for a textarea.
    showPicker - boolean false Toggle the display of emoji-mart's Picker.
    emojiPickerProps - PickerProps null Specify the props for emoji-mart's Picker. onSelect is used in react-emoji-textarea.
    onClick - function null Function to determine that a textarea field has been clicked.
    onSuggesting - function null Function to determine while an emoji input candidate is displayed.
    onChange ✅ function null Function used to get the content of the textarea.

    🔨 How to develop

    1. Use create-react-app to create a typescript project for react-emoji-textarea development.
    2. Clone react-emoji-textarea with git clone git@github.com:nikaera/react-emoji-textarea.git.
    3. Go into the react-emoji-textarea folder and run yarn or npm install to install the necessary libraries.
    4. Run npm link or yarn link to link from the project you created in step 1. for development.
    5. Add "react-emoji-textarea": "link:<1.'s project path>" to dependencies in package.json of the project created in 1..
    6. Go into the react-emoji-textarea folder and run yarn build:watch or npm run build:watch to continue to be compiled for development.
    7. Run yarn start or npm start in the project folder created in 1. to develop react-emoji-textarea.

    🎁 Contributing

    If you have any questions, please feel free to create an Issue or PR for you! 🙌




    npm i @nikaera/react-emoji-textarea

    DownloadsWeekly Downloads






    Unpacked Size

    23.3 kB

    Total Files


    Last publish


    • nikaera