React Emoji Picker: Add emoticons to your text fields in just two steps

Emojis are now such an essential part of how we communicate that we simply can’t afford to leave them out of our applications. They add an extra dimension to how we express ourselves in our day-to-day interactions that can be otherwise difficult to do with text only 😜

Thankfully, you can add a text component with an emoji picker to your React native apps in just two steps with the world’s most popular open source WYSIWYG HTML editor, TinyMCE.

In this article, we’ll start with a simple React project, and demonstrate how to add the text component configured with an emoji picker.

Start with a simple React app

We’ll start by creating a simple React project with the Create React App tool. If you already have a project set up, you might prefer to skip straight to the next section.

Run the following command (assuming Node.js is already installed).

$ npx create-react-app react-emoji-picker

Once the project is created, test it by running it from the project root directory.

$ cd react-emoji-picker
$ npm run start

Open a browser at the address displayed on the command line (usually http://localhost:3000).

1. Install the TinyMCE React component

The Official TinyMCE React Component (tinymce-react) is a wrapper around TinyMCE that makes it easier to use in a React application.

Once you have a react project set up, install the tinymce-react component with your package manager of choice; for example, if you’re using npm:

$ npm install @tinymce/tinymce-react

2. Add the emoji picker to your React project

Continuing with our simple React project, open the src/App.js file, import the Editor component by adding it to the list of imports, and add the component configured with the emoji picker. Also, replace no-api-key with your own Tiny API key. If you don’t already have one, you can get a free API key now. (It also comes with a 14-day trial of our premium plugins!)

import React from "react";
import { Editor } from "@tinymce/tinymce-react";

function App() {
  return (
    <Editor
      apiKey="no-api-key"
      init={{
        plugins: "emoticons",
        toolbar: "emoticons",
        toolbar_location: "bottom",
        menubar: false,
      }}
    />
  );
}

export default App;

The plugins and toolbar options indicate which plugins to load and which options should be available on the toolbar, respectively. Although TinyMCE can be configured with loads of functionality, in this case, we’re only making use of the emoticons plugin. We’ve also set the location of the toolbar to the bottom of the frame and removed the TinyMCE menubar.

Get Your Free TinyMCE API Key →

Now, when you run the React application, you’ll have a text component with an emoji picker, as shown in the following CodeSandbox:

Where to from here?

At this point, you might want to look at adjusting the height or width of the text area, or you might want to know how to get and set content within it.

See our comprehensive Tiny documentation for more information about integrating TinyMCE with React, basic configuration, and the emoticons plugin.

You may also be interested in how to enhance your React forms with a rich text editor in a controlled component.

And now that you’ve got a WYSIWYG editor in your apps, think about other options you could provide to your users for the best user experience possible; for instance, recently, we customized TinyMCE with several options and integrated it with a real-time chat app in Deno.