Gatsby JS Froala Editor

Using Froala Editor in Gatsby

Like React, Gatsby also supports third-party components and libraries. You can import and use Froala React components like any other React component in the Gatsby application.

The code example below shows hos to use the Froala Editor component.

      import React from "react"
      import "froala-editor/js/plugins.pkgd.min.js";
      import "froala-editor/css/froala_style.min.css";;
      import FroalaEditorComponent from "react-froala-wysiwyg";
  
      function App(){
          return < FroalaEditorComponent tag="textarea" />; 
      }
      export default App;
  

Components without server-side rendering

Gatsby is server-side rendered at build time, meaning that the code that gets to the browser has already been run to build pages and content.

Froala Editor Does not support server-side rendering, the Froala Editor component loads dynamically when the page is rendered in the browser. The code example below implements Gatsby using react-loadable

      import React from "react"
      import Loadable from 'react-loadable';
      import FroalaEditorComponent from "react-froala-wysiwyg";
  
      function App(){
          return < FroalaEditorComponent tag="textarea" />; 
      }
      const LoadableEditor=Loadable({
          loader:()=>import('../components/Froala'),
          loading() {
              return Loading...
            }
      })
      export default () => < LoadableEditor />;
  

Configuration

Please run the following commands after configuring the project.

      npm install -g gatsby-cli

      npm install

      Gatsby build

      Gatsby serve