Introducing Emoji Icons Support in the React Rich Text Editor
Tags: react, richtexteditor, webdev, whatsnew
Published: 2023-08-31 16:01:45

---
title: Introducing Emoji Icons Support in the React Rich Text Editor
published: true
date: 2023-08-30 10:19:24 UTC
tags: react, richtexteditor, webdev, whatsnew
canonical_url: https://www.syncfusion.com/blogs/post/emojis-in-react-rich-text-editor.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rbwmnvmexn2b0kaqqrh.png
---
The Syncfusion [React Rich Text Editor](https://www.syncfusion.com/react-components/react-wysiwyg-rich-text-editor "React Rich Text Editor") is a feature-rich WYSIWYG HTML and Markdown editor. It is widely used to create blogs, forum posts, messaging apps, and more. The control provides an efficient user interface for a better editing experience with mobile support. It has a variety of tools to edit and format rich content and return valid HTML markup or Markdown content. It allows users to insert images, links, tables, and lists with modular architecture.

With the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release, it now also provides an **emoji picker** that seamlessly adds emoji icons to your content. A small window or panel displays a variety of emoji arranged in different categories, such as smileys, animals, and food. Users can select the desired emoji by clicking on it or by typing its name in a search bar. This feature simplifies the process of adding expressive visuals to your text, enhancing the overall quality of your communication.

This article explains how to use the emoji picker feature in the React Rich Text Editor control and customize the emoji icons.

**Agenda**

- [Creating a React app](#create-react-app).
- [Adding the React Rich Text Editor to your app](#add-rte-to-react-app).
- [Configuring the emoji picker in the toolbar](#configure-emoji-picker-in-toolbar).
- [Customizing the emoji icons in the picker](#customize-emoji-picker).
- [Shortcut key for instantly opening the emoji picker](#shortcut-keys).
- [Custom placement of the emoji picker in an editor](#custom-placement-of-emoji-picker).

Let’s get started!

##<a name="create-react-app">Creating a React app</a>

First, we need to create a React application. To do so, install the [create-react-app](https://www.npmjs.com/package/create-react-app "create-react-app npm package") npm package using the following command in the desired location.

```
npx create-react-app my-app
```

**Note:** Refer to the [getting started with React apps](https://create-react-app.dev/docs/getting-started/ "Getting started with React apps documentation") documentation to create a React app using the npm and yarn commands.

##<a name="add-rte-to-react-app">Adding the React Rich Text Editor to the app</a>

Follow these steps to integrate the React Rich Text Editor component in your app.

### Step 1: Install the Syncfusion React Rich Text Editor package

Install the React Rich Text Editor component using the following command.

```
npm install @syncfusion/ej2-react-richtexteditor –save-dev
```

### Step 2: Add the CSS reference for the React Rich Text Editor

The following CSS files are available in the **../node\_modules/@syncfusion** package folder. Add them as references in the **src/App.css** file.

```js
@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2 -popups/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-react-richtexteditor/styles/bootstrap5.css';
```

**Note:** For more details, refer to the getting started with [React Rich Text Editor](https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started "React Rich Text Editor documentation") documentation.

### Step 3: Add the React Rich Text Editor to your app

Then, add the following code in the **src/App.js** file to add the Syncfusion React Rich Text Editor component and inject the required services.

```js
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import './App.css';

function App() {
  return (
    <RichTextEditorComponent id="EmotionIconstRTE">
      <p>An emoji picker in a Rich Text Editor is a tool that allows users to add emoji or emoticons to their text easily. Typically, it is a small window or panel that displays a variety of emoji arranged in different categories, such as smileys, animals, food, and so on. Users can select the desired emoji by clicking on it or by typing its name in a search bar. </p>
      <Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]} />
    </RichTextEditorComponent>
  );
}

export default App;
```

Now, we’ve integrated the React Rich Text Editor into our app. Let’s see how to configure the emoji picker in it.

##<a name="configure-emoji-picker-in-toolbar">Configuring the emoji picker in the toolbar</a>

To add the emoji icons in our app, first inject the **EmojiPicker** service into the **RichTextEditorComponent**. Then, add the  **EmojiPicker**  tool to the toolbar of the Rich Text Editor using the  **toolbarSettings**  [items](https://helpej2.syncfusion.com/react/documentation/api/rich-text-editor/toolbarSettings/#items "items property of React Rich Text Editor") property.

Refer to the following code example to configure the emoji picker in the Rich Text Editor.

```js
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, EmojiPicker } from '@syncfusion/ej2-react-richtexteditor';
import './App.css';

function App() {
  //Rich Text Editor ToolbarSettings
  const toolbarSettings = {
    items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
      'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'EmojiPicker', '|', 'Undo', 'Redo'
    ]
  };
  
return (
    <RichTextEditorComponent id="EmotionIconstRTE"
      toolbarSettings={toolbarSettings}>
      <p>An emoji picker in a Rich Text Editor is a tool that allows users to add emoji or emoticons to their text easily. Typically, it is a small window or panel that displays a variety of emoji, arranged in different categories, such as smileys, animals, food, and so on. Users can select the desired emoji by clicking on it or by typing its name in a search bar. </p>
      <Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar, EmojiPicker]} />
    </RichTextEditorComponent>
  );
}

export default App;
```

##<a name="customize-emoji-picker">Customizing the pre-defined emoji picker</a>

The emoji picker displays a default set of pre-defined emoji icons. However, you can also define custom emoji icons using the [emojiPickerSettings](https://helpej2.syncfusion.com/react/documentation/api/rich-text-editor/richTextEditorModel/#emojipickersettings "emojiPickerSettings property of React Rich Text Editor") property.

You can customize the toolbar icons in the emoji picker using the [code](https://helpej2.syncfusion.com/react/documentation/api/rich-text-editor/emojiIconsSet/#code "code property of EmojiIconsSet API in React Rich Text Editor") property and customize the font icons using the [iconCSS](https://helpej2.syncfusion.com/react/documentation/api/rich-text-editor/emojiIconsSet/#iconCss "iconCSS property of React Rich Text Editor") property within the **emojiPickerSettings**. Additionally, you can enable or disable the search box within the emoji picker using the [showSearchBox](https://helpej2.syncfusion.com/react/documentation/api/rich-text-editor/emojiSettings/#showSearchBox "showSearchBox property of React Rich Text Editor") property.

Use the following keyboard shortcut keys for emoji navigation and selection in the emoji picker:

- **Arrow keys** : Use the arrow keys (up, down, left, right) to move the emoji focus in the corresponding direction.
- **Enter** : To select the emoji currently in focus.
- **Escape** : To close the emoji picker pop-up without selecting an emoji.

Refer to the following code example.

```js
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, EmojiPicker } from '@syncfusion/ej2-react-richtexteditor';
import './App.css';

function App() {
  //Rich Text Editor ToolbarSettings
  const toolbarSettings = {
    items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
      'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'EmojiPicker', '|', 'Undo', 'Redo'
    ]
  };

  const emojiPickerSettings = {
    iconsSet: [{name: 'Smilies & People', code: '1F600', iconCss: 'e-emoji', 
                icons: [{ code: '1F600', desc: 'Grinning face' },
                { code: '1F603', desc: 'Grinning face with big eyes' },
                { code: '1F604', desc: 'Grinning face with smiling eyes' },
                { code: '1F606', desc: 'Grinning squinting face' },
                { code: '1F605', desc: 'Grinning face with sweat' },
                { code: '1F602', desc: 'Face with tears of joy' },
                { code: '1F923', desc: 'Rolling on the floor laughing' },
                { code: '1F60A', desc: 'Smiling face with smiling eyes' }]
                }, {
                name: 'Animals & Nature', code: '1F435', iconCss: 'e-animals',
                icons: [{ code: '1F436', desc: 'Dog face' },
                { code: '1F431', desc: 'Cat face' },
                { code: '1F42D', desc: 'Mouse face' },
                { code: '1F439', desc: 'Hamster face' },
                { code: '1F430', desc: 'Rabbit face' },
                { code: '1F98A', desc: 'Fox face' }]
                }, {
                name: 'Food & Drink', code: '1F347', iconCss: 'e-food-and-drinks',
                icons: [{ code: '1F34E', desc: 'Red apple' },
                { code: '1F34C', desc: 'Banana' },
                { code: '1F347', desc: 'Grapes' },
                { code: '1F353', desc: 'Strawberry' },
                { code: '1F35E', desc: 'Bread' },
                { code: '1F950', desc: 'Croissant' },
                { code: '1F955', desc: 'Carrot' },
                { code: '1F354', desc: 'Hamburger' }]
                }, {
                name: 'Activities', code: '1F383', iconCss: 'e-activities',
                icons: [{ code: '26BD', desc: 'Soccer ball' },
                { code: '1F3C0', desc: 'Basketball' },
                { code: '1F3C8', desc: 'American football' },
                { code: '26BE', desc: 'Baseball' },
                { code: '1F3BE', desc: 'Tennis' },
                { code: '1F3D0', desc: 'Volleyball' },
                { code: '1F3C9', desc: 'Rugby football' }]
                }, {
                name: 'Travel & Places', code: '1F30D', iconCss: 'e-travel-and-places',
                icons: [{ code: '2708', desc: 'Airplane' },
                { code: '1F697', desc: 'Automobile' },
                { code: '1F695', desc: 'Taxi' },
                { code: '1F6B2', desc: 'Bicycle' },
                { code: '1F68C', desc: 'Bus' }]
                }, {
                name: 'Objects', code: '1F507', iconCss: 'e-objects', icons: [{ code: '1F4A1', desc: 'Light bulb' },
                { code: '1F526', desc: 'Flashlight' },
                { code: '1F4BB', desc: 'Laptop computer' },
                { code: '1F5A5', desc: 'Desktop computer' },
                { code: '1F5A8', desc: 'Printer' },
                { code: '1F4F7', desc: 'Camera' },
                { code: '1F4F8', desc: 'Camera with flash' },
                { code: '1F4FD', desc: 'Film projector' }]
                }, {
                name: 'Symbols', code: '1F3E7', iconCss: 'e-symbols', icons: [{ code: '274C', desc: 'Cross mark' },
                { code: '2714', desc: 'Check mark' },
                { code: '26A0', desc: 'Warning sign' },
                { code: '1F6AB', desc: 'Prohibited' },
                { code: '2139', desc: 'Information' },
                { code: '267B', desc: 'Recycling symbol' },
                { code: '1F6AD', desc: 'No smoking' }]
                }]
  }
  

return (
    <RichTextEditorComponent id="EmotionIconstRTE"
      toolbarSettings={ toolbarSettings } emojiPickerSettings={ emojiPickerSettings }>
      <p>An emoji picker in a Rich Text Editor is a tool that allows users to easily add emoji or emoticons to their text. Typically, it is a small window or panel that displays a variety of emoji, arranged in different categories, such as smileys, animals, food, and so on. Users can select the desired emoji by clicking on it or by typing its name in a search bar. </p>
      <Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar, EmojiPicker]} />
    </RichTextEditorComponent>
  );
}

export default App;
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Using-custom-emoji-icons-in-React-Rich-Text-Editor-2.gif" alt="Using custom emoji icons in React Rich Text Editor" style="width:100%">

  <figcaption>Using custom emoji icons in React Rich Text Editor</figcaption>

</figure>

##<a name="shortcut-keys">Shortcut key for instantly opening the emoji picker</a>

To access the emoji picker quickly, press the **colon (:) key** while typing a word prefix in an editor. This action allows for instant emoji selection and display.

Additionally, you can continue typing in the editor after the colon to filter and refine your search for the desired emoji. This feature is handy when editing within a Rich Text Editor, saving you valuable time and effort.

##<a name="custom-placement-of-emoji-picker">Custom placement of the emoji picker in an editor</a>

You can place the emoji picker at the desired position within the editor using the **showEmojiPicker** public method.

By default, it opens at the current cursor position within the editor. However, if you prefer more control over its placement, you can call the **showEmojiPicker()** method and provide specific values for the x- and y-parameters.

The x-parameter determines the left position of the emoji picker, while the y-parameter determines the top position.

## Conclusion

Thanks for reading! In this blog, we’ve seen how to add predefined and custom emoji icons within the [React Rich Text Editor](https://www.syncfusion.com/react-components/react-wysiwyg-rich-text-editor "React Rich Text Editor") component. We look forward to you trying this integration and hope you provide feedback in the comments section below.

If you are new to Syncfusion, try our control features by downloading a [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products"). You can also explore our [online demo](https://ej2.syncfusion.com/react/demos/#/material/rich-text-editor/tools "React Rich Text Editor live demos") and our [documentation](https://ej2.syncfusion.com/react/documentation/rich-text-editor/ "React Rich Text Editor documentation") for more details.

If you have any questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [The Power of React’s Virtual DOM: A Comprehensive Explanation](https://www.syncfusion.com/blogs/post/react-virtual-dom.aspx "Blog: The Power of React’s Virtual DOM")
- [React useState vs. Context API: When to Use Them](https://www.syncfusion.com/blogs/post/react-usestate-vs-context-api.aspx "Blog: React useState vs. Context API")
- [Launch a React App in a Docker Environment](https://www.syncfusion.com/blogs/post/launch-react-app-in-docker.aspx "Blog: Launch a React App in a Docker Environment")
- [Integrating Google Calendar Events with Syncfusion React Scheduler [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/integrate-google-calendar-with-react-scheduler.aspx "Blog: Integrating Google Calendar Events with Syncfusion React Scheduler")