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

License

MIT © cesarwbr