A text input that allows emojis to be put in.
You should have the chayns-components
package installed. If that is not the
case already, run
yarn add chayns-components
or
npm i chayns-components
After the chayns-components
package is installed, you can import the component
and use it with React:
import React from 'react'
import { EmojiInput } from 'chayns-components';
// ...
<EmojiInput {...} />
The EmojiInput
-component takes the following props:
Name | Type | Default | Required |
---|---|---|---|
placeholder | string |
✓ | |
onInput | function |
✓ | |
value | string |
✓ | |
id | string |
✓ | |
hideBorder | boolean |
false |
|
onKeyDown | function |
||
disabled | boolean |
false |
|
style | { [key: string]: string | number } |
||
onFocus | function |
||
onBlur | function |
placeholder: string;
Text that will be shown as a placeholder when the input is empty.
onInput: function
This is called when the text changes. There is an additional key on the
event.target
property called pureInnerText
which contains the full text
without any of the emoji elements. This is the text you should store in your
local state and pass to this input as the value
-prop.
value: string;
The value of the input.
id: string;
The HTML id to give to the input element.
hideBorder?: boolean
Hides the bottom border of the input.
onKeyDown?: function
This will be called on the keydown
-event of the input element.
disabled?: boolean
Disables any interaction with the input and changes to a disabled style.
style?: { [key: string]: string | number }
A React style object that will be passed to the input element.
onFocus?: function
This function will be called when the input element receives focus.
onBlur?: function
This function will be called when the input element loses focus.