react-input-emoji 😍 😜 😂 😛

A powerful and customizable React component that seamlessly integrates emoji picker functionality into any input element, enhancing user experience.

📝 About

InputEmoji provides a simple and intuitive way to add emoji picker functionality to any input element in your React application. With just a few lines of code, you can enable your users to easily select and insert emojis into their text input.

The component is highly customizable, allowing you to control the styling, positioning and behavior of the emoji picker. It also supports various useful features out of the box, such as:

• Easy integration with any input element
• Customizable appearance via props
• Built-in support for cleaning input on enter
• Callback functions for onChange, onClick and onEnter events
• Ability to keep the picker open after selecting an emoji
• Internationalization support for multiple languages

InputEmoji leverages the power of the emoji-mart library to provide a wide range of emojis across different categories and styles. The internationalization capabilities allow you to cater to users from diverse linguistic backgrounds, making your application more inclusive and accessible.

Whether you're building a chat app, social media platform, or any other application that could benefit from emoji input, InputEmoji has you covered. Give your users a fun and engaging way to express themselves with this powerful yet easy-to-use component!

📦 Install

npm install --save react-input-emoji

🚀 Usage

After install import the react-input-emoji component to display your input with emoji support like so:

import React, { useState } from "react";
import InputEmoji from "react-input-emoji";

export default function Example() {
  const [text, setText] = useState("");

  function handleOnEnter(text) {
    console.log("enter", text);
  }

  return (
    <InputEmoji
      value={text}
      onChange={setText}
      cleanOnEnter
      onEnter={handleOnEnter}
      placeholder="Type a message"
    />
  );
}

🧩 Props

| Prop | Type | Default | Description | | ------------------ | ------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------ | | background | string | "white" | Specifies the background color of the input element. Accepts any valid CSS color value. | | borderColor | string | "#EAEAEA" | Specifies the border color of the input container. Accepts any valid CSS color value. | | borderRadius | number | 21 | Determines the border radius of the input container in pixels. Higher values result in more rounded corners. | | buttonElement | HTMLElement | - | Allows you to provide a custom HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. | | buttonRef | React.MutableRefObject | - | Accepts a React mutable ref object that, when referenced, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. | | cleanOnEnter | boolean | false | When set to true, the input value will be cleared after the user presses the Enter key. | | color | string | "black" | Specifies the color of the input text. Accepts any valid CSS color value. | | fontSize | number | 15 | Controls the font size (in pixels) of the placeholder text and input value. | | fontFamily | string | "sans-serif" | Specifies the font family for the placeholder text and input value. Accepts any valid CSS font-family value. | | height | number | 40 | Sets the total height (in pixels) of the area in which the input element is rendered. | | keepOpened | boolean | false | When set to true, the emoji picker will remain open after the user selects an emoji. Defaults to false. | | language | string | 'en' | Specifies the language to be used for the emoji picker. Available values: 'ar', 'be', 'cs', 'de', 'en', 'es', 'fa', 'fi', 'fr', 'hi', 'it', 'ja', 'kr', 'pl', 'pt', 'ru', 'sa', 'tr', 'uk', 'vi', 'zh'. | | maxLength | number | - | Limits the maximum number of characters that can be entered in the input element. | | onChange | function | - | A callback function that is invoked whenever the input value changes. It receives the current value as its argument. | | onClick | function | - | A callback function that is invoked when the input element is clicked. | | onEnter | function | - | A callback function that is invoked when the Enter key is pressed. It receives the current input value as its argument. | | onFocus | function | - | A callback function that is invoked when the input element receives focus. | | onResize | function | - | A callback function that is invoked when the width or height of the input element changes. It receives the current size value as its argument. | | placeholder | string | "Type a message" | Specifies the placeholder text to be displayed when the input is empty. | | placeholderColor | string | "#C4C4C4" | Specifies the color of the placeholder text. Accepts any valid CSS color value. | | shouldConvertEmojiToImage | boolean | false | When set to true, emojis in the input value will be converted to images. | | shouldReturn | boolean | - | When set to true, allows the user to create a new line using the Shift + Enter or Ctrl + Enter keyboard shortcuts. | | theme | string | - | Specifies the theme for the emoji picker popup. Available values: "light", "dark", "auto". | | value | string | "" | The current value of the input element. |

License

MIT © cesarwbr