How to Use Summernote in React.js: A Simple Guide

When building web applications, integrating rich text editors can greatly enhance the user experience. One such powerful and easy-to-use editor is Summernote. In this guide, we'll walk you through how to integrate Summernote into your React.js application step by step. Whether you're a seasoned developer or a beginner, this tutorial will help you set up Summernote quickly and efficiently.

What is Summernote?

Summernote  is a lightweight WYSIWYG (What You See Is What You Get) editor that provides a simple, user-friendly interface for creating and editing content. It offers essential features like formatting text, adding images, and embedding media, making it a popular choice for developers looking to add rich text editing capabilities to their applications.

Why Use Summernote in React.js?

Integrating Summernote into a React.js application can provide several benefits:

• User-Friendly Interface: Summernote's intuitive design makes it easy for users to create and format content without needing advanced technical skills.
• Rich Text Editing: It supports a wide range of formatting options, including bold, italic, headings, lists, and more.
• Customizable: Summernote can be customized to fit the specific needs of your application, such as adding plugins or changing the toolbar.

Step-by-Step Guide to Integrate Summernote in React.js

1. Set Up Your React Project

First, ensure you have a React project set up. If you don't have one yet, you can create a new project using Create React App:

npx create-react-app my-summernote-app
cd my-summernote-app

2. Install Summernote and Dependencies

Summernote requires jQuery and Bootstrap. You can install Summernote and its dependencies using npm:

npm install summernote react-summernote jquery bootstrap

Make sure to include Bootstrap CSS in your index.html or import it in your App.js:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'summernote/dist/summernote-bs4.min.css';

3. Add Summernote CSS and JS

Since Summernote relies on jQuery and Bootstrap's JavaScript, you'll need to include these scripts in your project. You can import them in your App.js or use a public/index.html file:

import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import 'summernote/dist/summernote-bs4.min.js';

4. Create a React Component for Summernote

Create a new component, e.g., SummernoteEditor.js, to integrate Summernote. Here's a basic example:

import React, { useEffect, useRef } from 'react';
import $ from 'jquery';
import 'summernote/dist/summernote-bs4.min.css';
import 'summernote/dist/summernote-bs4.min.js';

const SummernoteEditor = ({ content, onChange }) => {
  const editorRef = useRef(null);

  useEffect(() => {
    $(editorRef.current).summernote({
      height: 200, // Set editor height
      callbacks: {
        onChange: (contents) => {
          onChange(contents);
        }
      }
    });

    // Set initial content
    $(editorRef.current).summernote('code', content);

    return () => {
      $(editorRef.current).summernote('destroy');
    };
  }, [content, onChange]);

  return (
    <div ref={editorRef}></div>
  );
};

export default SummernoteEditor;

5. Use the Summernote Editor in Your App

Import and use the SummernoteEditor component in your main app component:

import React, { useState } from 'react';
import SummernoteEditor from './SummernoteEditor';

function App() {
  const [content, setContent] = useState('<p>Hello, Summernote!</p>');

  const handleChange = (newContent) => {
    setContent(newContent);
  };

  return (
    <div className="App">
      <h1>Summernote in React</h1>
      <SummernoteEditor content={content} onChange={handleChange} />
      <div>
        <h2>Content Preview</h2>
        <div dangerouslySetInnerHTML={{ __html: content }}></div>
      </div>
    </div>
  );
}

export default App;

6. Style Your Editor

To ensure that Summernote fits well with your application's design, you can apply custom styles. Create a styles.css file and import it into your project, or use inline styles within your components.

Conclusion

Integrating Summernote into a React.js application provides a powerful and flexible way to add rich text editing capabilities. By following these steps, you can easily set up Summernote and customize it to meet your needs. With Summernote, you can enhance your application's user experience and offer robust content creation tools.