React CMS applications are popular, especially in modern web development. One of their main components is the React WYSIWYG editor, which helps content creators generate and organize content within the CMS.

In a React CMS application, initializing the React WYSIWYG editor after clicking an external button can improve the user experience in case the editor is not needed immediately when the page loads. This approach, known as lazy loading, helps to speed up the initial page load time, which is a critical factor in user experience.

Why are React CMS Applications popular?

React CMS Applications are popular because they offer a powerful combination of React’s component-based architecture and the flexibility of a Content Management System (CMS), making them a go-to choice for developers looking to build dynamic, scalable, and efficient web applications.

React CMS applications are popular for several reasons:

1. Scalability: React CMS applications can handle large amounts of traffic and data without breaking down, making them perfect for businesses that experience sudden spikes in traffic or have many users.
2. Flexibility: Whether it’s a change in design or functionality, React CMS applications can be easily customized and adapted to meet the specific needs of a business.
3. Fast development cycles: developers can quickly create and deploy new features and updates in React CMSs, allowing businesses to respond fast to changing market demand and customer needs.
4. Seamless user experience: React CMS applications provide a seamless user experience, with fast loading times and intuitive navigation, increasing customer satisfaction and loyalty.
5. Community support: React CMS has a large and active community of developers, which means plenty of resources are available for troubleshooting and solving problems.
6. Integration with other technologies: React CMS can be easily integrated with other technologies, such as server-side rendering, GraphQL, and state management libraries, allowing developers to create complex and sophisticated applications.
7. Performance: React CMS applications are optimized for performance, using techniques such as lazy loading and code splitting, to ensure that the application loads quickly and runs smoothly.

Why Does React CMS Use WYSIWYG Editors?

WYSIWYG (What You See Is What You Get) editors enable users to create and edit content while applying the inserted format in real time. Moreover, it doesn’t require users to be familiar with coding. This streamlines the content creation and management process, making it more accessible for non-technical users. Professional WYSIWYG editors can provide your team with many editing features, helping them create professional-looking content easily. The powerful React WYSIWYG editor, Froala, has over 100 features.

How to Lazy Load Froala WYSIWYG Editor in React application

Let’s look at how to use lazy loading to keep the Froala React WYSIWYG Editor from loading until needed.

Prerequisites

• JavaScript (including some of the newer, ES2015 features)
• Basic understanding of React
• Node.js and npm installed

Setting Up The React Project

If you don’t already have a React project set up, the create-react-app makes it easy to create one:

npm uninstall -g create-react-app

npm install -g create-react-app

npx create-react-app lazy-load-froala-app

Cd lazy-load-froala-app

Next, install the react-froala-wysiwyg package, which provides the Froala Editor component for React:

npm install react-froala-wysiwyg --save

The --save flag is important to add the React Froala WYSIWYG editor package to the dependencies in your package.json file. This ensures that the Froala editor is included in your deployed application.

Integrating The Editor

You should integrate the editor into where you want to display the editor. For simplicity, we will suppose we want to display on the homepage. Edit the app.js file.

• Import the editor CSS stylesheet so the editor UI appears correctly.
• Import the FroalaEditorComponent so you can use the component inside the app function.
• Import the required plugins.
• Add the customization options
• Add initialization text

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

//froala_style.min.css: Only needed if you display the editor content outside the rich text editor to preserve the look of the edited HTML.
import 'froala-editor/css/froala_style.min.css';

//froala_editor.pkgd.min.css: Contains the editor UI styles, such as the toolbar, buttons, popups, etc.
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Import all Froala Editor component;
import FroalaEditorComponent from 'react-froala-wysiwyg';

// Import all Froala Editor plugins;
import 'froala-editor/js/plugins.pkgd.min.js';

// Render Froala Editor component.
function App() {
  const [model, setModel] = useState("the integration of CMS with React has become a significant trend in web development, offering developers the best of both worlds: the robustness of a CMS and the agility of React.");

  const handleModelChange= (event) =>{

    setModel(event)
  
  }  


  //Froala custom options
    let config = {
      heightMin: 300,
      events : {
        'contentChanged' : function(e, editor) {
          console.log('test');
        }
      }
    };

    return (
    <div className="App">
      <header className="App-header">
      <h1>Lazy load Froala app</h1>
        <FroalaEditorComponent
            model={model}
            onModelChange={handleModelChange}
            config={config}
          />

      </header>
    </div>
  );
}

export default App;

Running the app will display the Froala editor.

For more explanation about the above code, refer to the “Integrate Froala with React“ guide.

Displaying the Editor on the Button Click

To display the editor on click, we need to implement the following:

• Set up a state to track whether Froala should be displayed or removed.
• Create a button that, when clicked, updates the state to initialize Froala.
  • A button to display the editor.
  • A button to hide the editor and display its content only.
• Conditionally render the Froala Editor based on the state.
• Import the FroalaEditorView component to display the editor content outside the editor correctly.

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

//froala_style.min.css: Only needed if you display the editor content outside the rich text editor to preserve the look of the edited HTML.
import 'froala-editor/css/froala_style.min.css';

//froala_editor.pkgd.min.css: Contains the editor UI styles, such as the toolbar, buttons, popups, etc.
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Import core Froala Editor component;
import FroalaEditorComponent from 'react-froala-wysiwyg';

// Import the component to display the editor content outside the editor;
import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';

// Import all Froala Editor plugins;
import 'froala-editor/js/plugins.pkgd.min.js';

// Render Froala Editor component.
function App() {
  const [model, setModel] = useState("the integration of CMS with React has become a significant trend in web development, offering developers the best of both worlds: the robustness of a CMS and the agility of React.");

  const handleModelChange= (event) =>{

    setModel(event)
  
  }  

  //Set up a state to track whether Froala should be displayed or removed.
  const [initializeEditor, setInitializeEditor] = useState(false);

  const handleButtonClick = (flag) => {
  setInitializeEditor(flag);
  };

  //Froala custom options
    let config = {
      heightMin: 300,
      events : {
        'contentChanged' : function(e, editor) {
          console.log('test');
        }
      }
    };

    return (
    <div className="App">
      <header className="App-header">
      <h1>Lazy load Froala app</h1>
      {
        //Conditionally render the Froala Editor based on the state.
      }
        { initializeEditor && <FroalaEditorComponent
            model={model}
            onModelChange={handleModelChange}
            config={config}
          />
        }
        
        { !initializeEditor && <FroalaEditorView
          model={model}
        />
        }

      { 
      // Add button
       }
      <button onClick={() => handleButtonClick(true)}>Edit Content</button>
      <button onClick={() => handleButtonClick(false)}>View Content</button>


      </header>
    </div>
  );
}

export default App;

Conclusion

Enabling the Lazy loading technique in React CMS improves the overall user experience of your application. Ask yourself if you need the Froala React WYSIWYG Editor component to be initialized immediately after the page loads. If not, implement the lazy load technique as described above.

Try it yourself and once you are ready to use Froala in production, subscribe to the plan that suits you.