Skip to content

cesarwbr/react-input-emoji

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

react-input-emoji 😍 😜 πŸ˜‚ πŸ˜›

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

NPM JavaScript Style Guide

Demo

πŸ“ 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

About

A React input with an option to pick emojis 😍 😜 πŸ˜‚ πŸ˜›

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published