react-input-emoji 5.6.11 → 5.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -26
- package/dist/index.es.js +22 -5
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +21 -4
- package/dist/index.js.map +1 -1
- package/dist/src/index.d.ts +2 -0
- package/dist/src/text-input.d.ts +8 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,22 +1,35 @@
|
|
|
1
|
-
# react-input-emoji
|
|
1
|
+
# react-input-emoji 😍 😜 😂 😛
|
|
2
2
|
|
|
3
|
-
> A React
|
|
3
|
+
> A powerful and customizable React component that seamlessly integrates emoji picker functionality into any input element, enhancing user experience.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/react-input-emoji) [](https://standardjs.com)
|
|
6
6
|
|
|
7
7
|
<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>
|
|
8
8
|
|
|
9
|
-
## About
|
|
9
|
+
## 📝 About
|
|
10
10
|
|
|
11
|
-
InputEmoji provides a simple way to
|
|
11
|
+
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.
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
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:
|
|
14
|
+
|
|
15
|
+
- Easy integration with any input element
|
|
16
|
+
- Customizable appearance via props
|
|
17
|
+
- Built-in support for cleaning input on enter
|
|
18
|
+
- Callback functions for onChange, onClick and onEnter events
|
|
19
|
+
- Ability to keep the picker open after selecting an emoji
|
|
20
|
+
- Internationalization support for multiple languages
|
|
21
|
+
|
|
22
|
+
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.
|
|
23
|
+
|
|
24
|
+
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!
|
|
25
|
+
|
|
26
|
+
## 📦 Install
|
|
14
27
|
|
|
15
28
|
```bash
|
|
16
29
|
npm install --save react-input-emoji
|
|
17
30
|
```
|
|
18
31
|
|
|
19
|
-
## Usage
|
|
32
|
+
## 🚀 Usage
|
|
20
33
|
|
|
21
34
|
After install import the react-input-emoji component to display your input with emoji support like so:
|
|
22
35
|
|
|
@@ -43,29 +56,32 @@ export default function Example() {
|
|
|
43
56
|
}
|
|
44
57
|
```
|
|
45
58
|
|
|
46
|
-
## Props
|
|
59
|
+
## 🧩 Props
|
|
47
60
|
|
|
48
61
|
| Prop | Type | Default | Description |
|
|
49
62
|
| ------------------ | ------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
50
|
-
| `
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
63
|
+
| `background` | string | "white" | Specifies the background color of the input element. Accepts any valid CSS color value. |
|
|
64
|
+
| `borderColor` | string | "#EAEAEA" | Specifies the border color of the input container. Accepts any valid CSS color value. |
|
|
65
|
+
| `borderRadius` | number | 21 | Determines the border radius of the input container in pixels. Higher values result in more rounded corners. |
|
|
66
|
+
| `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. |
|
|
67
|
+
| `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. |
|
|
68
|
+
| `cleanOnEnter` | boolean | false | When set to true, the input value will be cleared after the user presses the Enter key. |
|
|
69
|
+
| `fontSize` | number | 15 | Controls the font size (in pixels) of the placeholder text and input value. |
|
|
70
|
+
| `fontFamily` | string | "sans-serif" | Specifies the font family for the placeholder text and input value. Accepts any valid CSS font-family value. |
|
|
71
|
+
| `height` | number | 40 | Sets the total height (in pixels) of the area in which the input element is rendered. |
|
|
72
|
+
| `keepOpened` | boolean | false | When set to true, the emoji picker will remain open after the user selects an emoji. Defaults to false. |
|
|
73
|
+
| `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'. |
|
|
74
|
+
| `maxLength` | number | - | Limits the maximum number of characters that can be entered in the input element. |
|
|
75
|
+
| `onChange` | function | - | A callback function that is invoked whenever the input value changes. It receives the current value as its argument. |
|
|
76
|
+
| `onClick` | function | - | A callback function that is invoked when the input element is clicked. |
|
|
77
|
+
| `onEnter` | function | - | A callback function that is invoked when the Enter key is pressed. It receives the current input value as its argument. |
|
|
78
|
+
| `onFocus` | function | - | A callback function that is invoked when the input element receives focus. |
|
|
79
|
+
| `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. |
|
|
80
|
+
| `placeholder` | string | "Type a message" | Specifies the placeholder text to be displayed when the input is empty. |
|
|
81
|
+
| `placeholderColor` | string | "#C4C4C4" | Specifies the color of the placeholder text. Accepts any valid CSS color value. |
|
|
82
|
+
| `shouldReturn` | boolean | - | When set to true, allows the user to create a new line using the `Shift + Enter` or `Ctrl + Enter` keyboard shortcuts. |
|
|
83
|
+
| `theme` | string | - | Specifies the theme for the emoji picker popup. Available values: "light", "dark", "auto". |
|
|
84
|
+
| `value` | string | "" | The current value of the input element. |
|
|
69
85
|
|
|
70
86
|
## License
|
|
71
87
|
|
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, memo
|
|
1
|
+
import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useMemo, useState, memo } from 'react';
|
|
2
2
|
import ReactDOM from 'react-dom';
|
|
3
3
|
|
|
4
4
|
function styleInject(css, ref) {
|
|
@@ -936,7 +936,7 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
|
|
|
936
936
|
* @property {(event: React.ClipboardEvent) => void} onCopy
|
|
937
937
|
* @property {(event: React.ClipboardEvent) => void} onPaste
|
|
938
938
|
* @property {string} placeholder
|
|
939
|
-
* @property {
|
|
939
|
+
* @property {{borderRadius?: number; borderColor?: string; fontSize?: number; fontFamily?: string; background: string; placeholderColor?: string;}} style
|
|
940
940
|
* @property {number} tabIndex
|
|
941
941
|
* @property {string} className
|
|
942
942
|
* @property {(html: string) => void} onChange
|
|
@@ -1023,6 +1023,15 @@ var TextInput = function TextInput(_ref, ref) {
|
|
|
1023
1023
|
};
|
|
1024
1024
|
});
|
|
1025
1025
|
|
|
1026
|
+
/** @type {React.CSSProperties} */
|
|
1027
|
+
var placeholderStyle = useMemo(function () {
|
|
1028
|
+
var placeholderStyle = {};
|
|
1029
|
+
if (style.placeholderColor) {
|
|
1030
|
+
placeholderStyle.color = style.placeholderColor;
|
|
1031
|
+
}
|
|
1032
|
+
return placeholderStyle;
|
|
1033
|
+
}, [style.placeholderColor]);
|
|
1034
|
+
|
|
1026
1035
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
|
1027
1036
|
var placeholderRef = useRef(null);
|
|
1028
1037
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
|
@@ -1086,7 +1095,8 @@ var TextInput = function TextInput(_ref, ref) {
|
|
|
1086
1095
|
onClick: handleClick
|
|
1087
1096
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1088
1097
|
ref: placeholderRef,
|
|
1089
|
-
className: "react-input-emoji--placeholder"
|
|
1098
|
+
className: "react-input-emoji--placeholder",
|
|
1099
|
+
style: placeholderStyle
|
|
1090
1100
|
}, placeholder), /*#__PURE__*/React.createElement("div", {
|
|
1091
1101
|
ref: textInputRef,
|
|
1092
1102
|
onKeyDown: handleKeyDown,
|
|
@@ -4490,6 +4500,7 @@ function usePollute() {
|
|
|
4490
4500
|
* @property {boolean=} cleanOnEnter
|
|
4491
4501
|
* @property {(text: string) => void=} onEnter
|
|
4492
4502
|
* @property {string=} placeholder
|
|
4503
|
+
* @property {string=} placeholderColor
|
|
4493
4504
|
* @property {(size: {width: number, height: number}) => void=} onResize
|
|
4494
4505
|
* @property {() => void=} onClick
|
|
4495
4506
|
* @property {() => void=} onFocus
|
|
@@ -4506,6 +4517,7 @@ function usePollute() {
|
|
|
4506
4517
|
* @property {string=} borderColor
|
|
4507
4518
|
* @property {number=} fontSize
|
|
4508
4519
|
* @property {string=} fontFamily
|
|
4520
|
+
* @property {string=} background
|
|
4509
4521
|
* @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
|
|
4510
4522
|
* @property {import('./types/types').Languages=} language
|
|
4511
4523
|
* @property {(text: string) => Promise<MetionUser[]>=} searchMention
|
|
@@ -4545,7 +4557,9 @@ function InputEmoji(props, ref) {
|
|
|
4545
4557
|
borderRadius = props.borderRadius,
|
|
4546
4558
|
borderColor = props.borderColor,
|
|
4547
4559
|
fontSize = props.fontSize,
|
|
4548
|
-
fontFamily = props.fontFamily
|
|
4560
|
+
fontFamily = props.fontFamily,
|
|
4561
|
+
background = props.background,
|
|
4562
|
+
placeholderColor = props.placeholderColor;
|
|
4549
4563
|
|
|
4550
4564
|
/** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
|
|
4551
4565
|
var textInputRef = useRef(null);
|
|
@@ -4714,7 +4728,9 @@ function InputEmoji(props, ref) {
|
|
|
4714
4728
|
borderRadius: borderRadius,
|
|
4715
4729
|
borderColor: borderColor,
|
|
4716
4730
|
fontSize: fontSize,
|
|
4717
|
-
fontFamily: fontFamily
|
|
4731
|
+
fontFamily: fontFamily,
|
|
4732
|
+
background: background,
|
|
4733
|
+
placeholderColor: placeholderColor
|
|
4718
4734
|
},
|
|
4719
4735
|
tabIndex: tabIndex,
|
|
4720
4736
|
className: inputClass,
|
|
@@ -4741,6 +4757,7 @@ InputEmojiWithRef.defaultProps = {
|
|
|
4741
4757
|
borderColor: "#EAEAEA",
|
|
4742
4758
|
fontSize: 15,
|
|
4743
4759
|
fontFamily: "sans-serif",
|
|
4760
|
+
background: "white",
|
|
4744
4761
|
tabIndex: 0,
|
|
4745
4762
|
shouldReturn: false,
|
|
4746
4763
|
customEmojis: [],
|