### Install Dependencies and Start Example Project

Source: https://github.com/cesarwbr/react-input-emoji/blob/master/example/README.md

Navigate to the example directory, install its dependencies, and start the development server.

```sh
cd example
yarn
yarn start
```

--------------------------------

### Install Dependencies and Build Main Project

Source: https://github.com/cesarwbr/react-input-emoji/blob/master/example/README.md

Navigate to the project root and install dependencies using Yarn, then build the main project.

```sh
cd ../
yarn
yarn build
```

--------------------------------

### Install react-input-emoji

Source: https://github.com/cesarwbr/react-input-emoji/blob/master/README.md

Install the react-input-emoji package using npm.

```bash
npm install --save react-input-emoji
```

--------------------------------

### Basic Usage of InputEmoji Component

Source: https://github.com/cesarwbr/react-input-emoji/blob/master/README.md

Demonstrates how to import and use the InputEmoji component in a React application. It shows state management for the input value and handling the 'onEnter' event.

```jsx
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"
    />
  );
}
```

--------------------------------

### Component Props

Source: https://github.com/cesarwbr/react-input-emoji/blob/master/README.md

This section outlines all the available props for the react-input-emoji component, detailing their types, default values, and purpose.

```APIDOC
## Component Props

This component accepts the following props to customize its behavior and appearance:

### Props Table

| 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".                               |
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.