Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
React logo with Winking Face with Tongue emoji in the center.

Add an emoji picker to text fields in your React apps

Ben Long

July 21st, 2020

Written by

Ben Long
Ben Long

Category

How-tos & Tutorials

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

Emoji picker in a React app.

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).

The basic application running in a browser.

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 30-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.

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.

Real-time chat app with TinyMCE WYSIWYG editor.
EmoticonsReact
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Text "Insert Template" with corresponding icon above.
    How-tos & Tutorials

    Making the most of templates in TinyMCE

    by Marty Friedel in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor