The Syncfusion 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 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.AgendaLet’s get started!First, we need to create a React application. To do so, install the create-react-app npm package using the following command in the desired location.Note: Refer to the getting started with React apps documentation to create a React app using the npm and yarn commands.Follow these steps to integrate the React Rich Text Editor component in your app.Install the React Rich Text Editor component using the following command.The following CSS files are available in the ../node_modules/@syncfusion package folder. Add them as references in the src/App.css file.Note: For more details, refer to the getting started with React Rich Text Editor documentation.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.Now, we’ve integrated the React Rich Text Editor into our app. Let’s see how to configure the emoji picker in it.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 property.Refer to the following code example to configure the emoji picker in the Rich Text Editor.The emoji picker displays a default set of pre-defined emoji icons. However, you can also define custom emoji icons using the emojiPickerSettings property.You can customize the toolbar icons in the emoji picker using the code property and customize the font icons using the iconCSS property within the emojiPickerSettings. Additionally, you can enable or disable the search box within the emoji picker using the showSearchBox property.Use the following keyboard shortcut keys for emoji navigation and selection in the emoji picker:Refer to the following code example.Refer to the following image.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.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.Thanks for reading! In this blog, we’ve seen how to add predefined and custom emoji icons within the 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. You can also explore our online demo and our documentation for more details.If you have any questions, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you! 10 JavaScript Naming Conventions Every Developer Should Know Angular Promises Versus Observables 6 Easy Ways to Export Data to Excel in C# Be the first to get updates 10 JavaScript Naming Conventions Every Developer Should Know Angular Promises Versus Observables 6 Easy Ways to Export Data to Excel in C# Be the first to get updatesCopyright © 2001 - 2023 Syncfusion, Inc. All Rights ReservedFax: +1 919.573.0306US: +1 919.481.1974UK: +44 20 7084 6215Toll Free: 1-888-9DOTNET