react-input-emoji 5.6.10 → 5.7.0

package/README.md

@@ -1,22 +1,35 @@
-# react-input-emoji
+# react-input-emoji 😍 😜 😂 😛
 
-> A React input with an option to pick emojis
+> A powerful and customizable React component that seamlessly integrates emoji picker functionality into any input element, enhancing user experience.
 
 [![NPM](https://img.shields.io/npm/v/react-input-emoji.svg)](https://www.npmjs.com/package/react-input-emoji) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
 <a href="https://cesarwbr.github.io/react-input-emoji/"><img width="500" src="https://cesarwbr.github.io/react-input-emoji/assets/images/screely-1566732641740.png" alt="Demo"></a>
 
-## About
+## 📝 About
 
-InputEmoji provides a simple way to have an input element with emoji picker support. Click the picker button next to the input field and select an emoji from the popup window. Done!
+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. 
 
-## Install
+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
 
 ```bash
 npm install --save react-input-emoji
 ```
 
-## Usage
+## 🚀 Usage
 
 After install import the react-input-emoji component to display your input with emoji support like so:
 
@@ -43,29 +56,32 @@ export default function Example() {
 }
 ```
 
-## Props
+## 🧩 Props
 
 | Prop               | Type                     | Default          | Description                                                                                                              |
 | ------------------ | ------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `borderColor`      | string                   | "#EAEAEA"        | The border color of the input container.                                                                                 |
-| `borderRadius`     | number                   | 21               | The border radius of the input container.                                                                                |
-| `buttonElement`    | HTMLElement              | -                | An HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
-| `buttonRef`        | React.MutableRefObject   | -                | 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            | Clean the input value after the keydown event.                                                                           |
-| `fontSize`         | number                   | 15               | The font size of the placeholder and input container.                                                                    |
-| `fontFamily`       | string                   | "sans-serif"     | The font family of the placeholder and input container.                                                                  |
-| `height`           | number                   | 40               | The total height of the area in which the element is rendered.                                                           |
-| `keepOpened`       | boolean                  | false            | If set to true, the emoji picker will remain open after selecting an emoji. Defaults to false.                            |
-| `maxLength`        | number                   | -                | The maximum number of characters allowed in the element.                                                                 |
-| `onChange`         | function                 | -                | This function is called when the value of the input changes. The first argument is the current value.                    |
-| `onClick`          | function                 | -                | This function is called when the input is clicked.                                                                       |
-| `onEnter`          | function                 | -                | This function is called after the keydown event is fired with the `keyCode === 13` returning the last value.             |
-| `onFocus`          | function                 | -                | This function is called when the input has received focus.                                                               |
-| `onResize`         | function                 | -                | This function is called when the width or the height of the input changes. The first argument is the current size value. |
-| `placeholder`      | string                   | "Type a message" | Set the placeholder of the input.                                                                                        |
-| `shouldReturn`     | boolean                  | -                | Allows the user to use the `Shift + Enter` or `Ctrl + Enter` keyboard shortcut to create a new line.                      |
-| `theme`            | string                   | -                | Set theme for emoji popup. Available values "light", "dark", "auto"                                                      |
-| `value`            | string                   | ""               | The input value.                                                                                                         |
+| `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.                                  |
+| `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.                                          |
+| `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
 

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, memo, useMemo } from 'react';
+import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useMemo, useState, memo } from 'react';
 import ReactDOM from 'react-dom';
 
 function styleInject(css, ref) {
@@ -688,9 +688,11 @@ function totalCharacters(_ref2) {
  * @return {string}
  */
 function removeHtmlExceptBr(inputDiv) {
-  var temp = inputDiv.innerHTML.replace(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
-  var stripped = temp.replace(/<[^>]+>/g, ""); // strip all html tags
-  var _final = stripped.replace(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
+  var temp = inputDiv.innerHTML.replaceAll(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
+  var tempContainer = document.createElement("div");
+  tempContainer.innerHTML = temp;
+  var stripped = tempContainer.innerText; // strip all html tags
+  var _final = stripped.replaceAll(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
   return _final;
 }
 
@@ -725,7 +727,7 @@ function getSelectionStart$1(range) {
 
 /**
  * 
- * @returns {Object} cursor
+ * @return {Object} cursor
  */
 function getCursor() {
   var selection = window.getSelection();
@@ -832,9 +834,7 @@ function replaceAllHtmlToString(html, shouldReturn) {
 
   // remove all ↵ for safari
   text = text.replace(/\n/gi, "");
-  var tempContainer = document.createElement("div");
-  tempContainer.innerHTML = text;
-  return tempContainer.innerText || "";
+  return text;
 }
 
 // @ts-check
@@ -936,7 +936,7 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
  * @property {(event: React.ClipboardEvent) => void} onCopy
  * @property {(event: React.ClipboardEvent) => void} onPaste
  * @property {string} placeholder
- * @property {React.CSSProperties} style
+ * @property {{borderRadius?: number; borderColor?: string; fontSize?: number; fontFamily?: string; background: string; placeholderColor?: string;}} style
  * @property {number} tabIndex
  * @property {string} className
  * @property {(html: string) => void} onChange
@@ -1023,6 +1023,15 @@ var TextInput = function TextInput(_ref, ref) {
     };
   });
 
+  /** @type {React.CSSProperties} */
+  var placeholderStyle = useMemo(function () {
+    var placeholderStyle = {};
+    if (style.placeholderColor) {
+      placeholderStyle.color = style.placeholderColor;
+    }
+    return placeholderStyle;
+  }, [style.placeholderColor]);
+
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
   var placeholderRef = useRef(null);
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
@@ -1086,7 +1095,8 @@ var TextInput = function TextInput(_ref, ref) {
     onClick: handleClick
   }, /*#__PURE__*/React.createElement("div", {
     ref: placeholderRef,
-    className: "react-input-emoji--placeholder"
+    className: "react-input-emoji--placeholder",
+    style: placeholderStyle
   }, placeholder), /*#__PURE__*/React.createElement("div", {
     ref: textInputRef,
     onKeyDown: handleKeyDown,
@@ -4490,6 +4500,7 @@ function usePollute() {
  * @property {boolean=} cleanOnEnter
  * @property {(text: string) => void=} onEnter
  * @property {string=} placeholder
+ * @property {string=} placeholderColor
  * @property {(size: {width: number, height: number}) => void=} onResize
  * @property {() => void=} onClick
  * @property {() => void=} onFocus
@@ -4506,6 +4517,7 @@ function usePollute() {
  * @property {string=} borderColor
  * @property {number=} fontSize
  * @property {string=} fontFamily
+ * @property {string=} background
  * @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
  * @property {import('./types/types').Languages=} language
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
@@ -4545,7 +4557,9 @@ function InputEmoji(props, ref) {
     borderRadius = props.borderRadius,
     borderColor = props.borderColor,
     fontSize = props.fontSize,
-    fontFamily = props.fontFamily;
+    fontFamily = props.fontFamily,
+    background = props.background,
+    placeholderColor = props.placeholderColor;
 
   /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
   var textInputRef = useRef(null);
@@ -4714,7 +4728,9 @@ function InputEmoji(props, ref) {
       borderRadius: borderRadius,
       borderColor: borderColor,
       fontSize: fontSize,
-      fontFamily: fontFamily
+      fontFamily: fontFamily,
+      background: background,
+      placeholderColor: placeholderColor
     },
     tabIndex: tabIndex,
     className: inputClass,
@@ -4741,6 +4757,7 @@ InputEmojiWithRef.defaultProps = {
   borderColor: "#EAEAEA",
   fontSize: 15,
   fontFamily: "sans-serif",
+  background: "white",
   tabIndex: 0,
   shouldReturn: false,
   customEmojis: [],