Improve Your React Project Engagement With Froala Custom Emoticons

In 2023, it’s important to have an interesting user interface to keep people engaged. One way to enhance the experience is by incorporating emoticons into your application.

Emoticons have become essential in development, rather than an embellishment. Emoticons, or emojis, play a role in enhancing communication across platforms.

Emoticons are important because they help us express ourselves and engage users in communication. They personalize our messages.

They are also a universal language and can enhance branding efforts. Emoticons add a visual element to text, making content more interesting.

They contribute to storytelling by conveying emotions and context in a limited space.

The Froala WYSIWYG editor lets you do this with its Custom Emoticons feature. In the blog post, we will explore how to integrate Froala Custom Emoticons into a React project with our versatile react rich text editor.

Froala Custom Emoticons

Take a moment to see how Froala Custom Emoticons can help your application. Froala is a tool that helps developers make advanced text editors for web apps.

Users can add their own emoticons or emojis using the Custom Emoticons feature, expanding the editor’s capabilities.

Users can use Custom Emoticons to add their own personal touch to messages, instead of using the standard emojis.

Prerequisites

Before we start, make sure you have the following prerequisites installed:

• Node.js and npm (Node Package Manager): Ensure that you have Node.js installed on your machine.
• Create React App: Install Create React App globally using the following command:

npm install -g create-react-app

Now that we have the prerequisites in place, let’s proceed with the integration.

Setting Up a React Project

To get started, create a new React project using the Create React App. Open your terminal and run the commands:

npx create-react-app froala-custom-emoticons-demo

cd froala-custom-emoticons-demo

This will create a new React project named froala-custom-emoticons-demo and navigate into its directory.

Installing Froala Editor

To use Froala Custom Emoticons in our React project, we need to install the Froala Editor package. In your project directory, run the command:

npm install react-froala-wysiwyg --save

This package provides a React wrapper for the Froala Editor, making it easy to integrate into our application.

Integrating Froala Editor

Now that we have the Froala Editor installed, let’s integrate it into our React project. Open the “src/App.js” file in your code editor and replace its contents with the following code:

import './App.css';

import FroalaEditorComponent from "react-froala-wysiwyg";

import "froala-editor/css/froala_style.min.css";

import "froala-editor/css/froala_editor.pkgd.min.css";

import "froala-editor/js/plugins.pkgd.min.js";

function App() {

  let model = '<p><a href="https://froala.com">Froala WYSIWYG Editor</a></p>';

  return (

    <div id="froala-editor">

      <h1>Froala</h1>

      <FroalaEditorComponent

        tag="textarea"

        model={model}

        config={{

        }}

      />

    </div>

  )

}

export default App;

1. The import App.css statement imports the styles specific to the App component.
2. FroalaEditorComponent is a React component provided by the “react-froala-wysiwyg” package.
3. The next 3 lines are about importing the Froala editor styles and plugins.
4. The App function is a functional React component.
5. The model variable contains the initial content of the Froala editor. It’s a simple HTML string with a link.
6. Inside the return statement, there’s a div with the id “froala-editor” and an h1 element with the text “Froala.”
7. The FroalaEditorComponent is used to render the Froala editor. It is configured to use a textarea as its underlying element (tag=”textarea”), and the initial content is set using the model prop.
8. The App component is exported as the default export of this module.

Using Custom Emoticons in Froala Editor

Froala Editor provides flexibility in customizing the display of emoticons. The following code must be put on the config part.

In the toolbarButtons define the button emoticons.

You can control how many emoticons show up in each row of the emoticons menu by using the emoticonsStep property in the FroalaEditor component’s config prop.

The emotionsSet allows you to personalize the emotions displayed.

       toolbarButtons: ["emoticons"],

          emoticonsStep: 4,

          emoticonsSet: [{

            id: 'people',

            name: 'Smileys & People',

            code: '1f600',

            emoticons: [

             { code: '1f600', desc: 'Grinning face' },

             { code: '1f601', desc: 'Grinning face with smiling eyes' },

             { code: '1f602', desc: 'Face with tears of joy' },

             { code: '1f603', desc: 'Smiling face with open mouth' },

             { code: '1f604', desc: 'Smiling face with open mouth and smiling eyes' },

            { code: '1f605', desc: 'Smiling face with open mouth and cold sweat' },

             { code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes' },

       { code: '1f607', desc: 'Smiling face with halo' }

            ]

            }, {

            id: 'nature',

            name: 'Animals & Nature',

            code: '1F435',

            emoticons: [

              { code: '1F412', desc: 'Monkey' },

              { code: '1F415', desc: 'Dog' },

              { code: '1F429', desc: 'Poodle' },

              { code: '1F408', desc: 'Cat' },

              { code: '1F405', desc: 'Tiger' },

              { code: '1F406', desc: 'Leopard' },

              { code: '1F40E', desc: 'Horse' },

              { code: '1F402', desc: 'Ox' },

              { code: '1F403', desc: 'Water Buffalo' },

            ]

          }]

        }}

Here’s an explanation:

1. toolbarButtons: [“emoticons”]: This adds an “emoticons” button to the toolbar, indicating that users can interact with emoticons.
2. emoticonsStep: 4: This is related to some intervals for emoticons.
3. emoticonsSet: An array containing sets of emoticons. In this case, there are two sets: “Smileys & People” and “Animals & Nature”.
4. For “Smileys & People” (id: ‘people’):

• • code: ‘1f600’: Identifier for this set.
  • emoticons: An array of objects, each representing an emoticon with a code (e.g., ‘1f600’) and a description of the emoji (‘Grinning face’, ‘Grinning face with smiling eyes’, ‘Face with tears of joy’, ‘Smiling face with open mouth’, ‘Smiling face with open mouth and smiling eyes’, ‘Smiling face with open mouth and cold sweat’, ‘Smiling face with open mouth and tightly-closed eyes’, ‘Smiling face with halo’).

5. For “Animals & Nature” (id: ‘nature’):

• • code: ‘1F435’: Another identifier for this set.
  • emoticons: Array of objects, each representing an animal or nature-related emoticon (‘Monkey’, ‘Dog’, ‘Poodle’, ‘Cat’, ‘Tiger’, ‘Leopard’, ‘Horse’, ‘Ox’, ‘Water Buffalo’).

Running the React App

Now that we’ve set up the Froala Editor in our React project, let’s run the application and see our Custom Emoticons in action. In your terminal, run the following command:

npm start

This will start the development server, and you can view your React app by navigating to http://localhost:3000 in your web browser.

Conclusion

This article shows how to add Froala Custom Emoticons to a React project. It makes communication more expressive and personal.

You can make a text editor with lots of features. Users can add their own emoticons, which makes the app more fun and interactive.

Froala Editor has many features for developers, like Custom Emoticons.

As you work on your React project, try using Froala Editor to improve your web app’s features and user experience.