emoji-input.md

EmojiInput

Source

A text input that allows emojis to be put in.

Usage

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 {...} />

Props

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

placeholder: string;

Text that will be shown as a placeholder when the input is empty.

---

onInput

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

value: string;

The value of the input.

---

id

id: string;

The HTML id to give to the input element.

---

hideBorder

hideBorder?: boolean

Hides the bottom border of the input.

---

onKeyDown

onKeyDown?: function

This will be called on the keydown-event of the input element.

---

disabled

disabled?: boolean

Disables any interaction with the input and changes to a disabled style.

---

style

style?: { [key: string]: string | number }

A React style object that will be passed to the input element.

---

onFocus

onFocus?: function

This function will be called when the input element receives focus.

---

onBlur

onBlur?: function

This function will be called when the input element loses focus.