What is Gatsby JS?

Gatsby is a free, open-source, React-based framework for building fast websites and applications. Gatsby streamlines the setup and configuration of your build, it can pull data into your UI from any and all of your sources. Amazing performance and current web best practices are built into Gatsby sites.

How third party libraries are introduced in Gatsby?

Different products are introduced in Gatsby with the help of Plugins. Gatsby plugins are Node.js packages that implement Gatsby APIs. For larger, more complex sites, plugins let you modularize your site customizations into site-specific functionality.

Using Froala wysiwyg Editor in Gatsby

Just like React, Gatsby also supports third-party components and libraries. The React Froala wysiwyg can easily be integrated into Gatsby applications. Just like any other react components, React Froala wysiwyg components can be imported and used in the Gatsby application.

Given below is a code example for using 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

Server-side rendering means pages and content are built out by the Node.js server and then sent to a browser ready to go. It’s like pages are constructed before even being sent to the user. 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.

SInce Froala Editor Does not support Server side rendering, the Froala Editor component will be dynamically loaded when the page is rendered in the browser. Below is code example implemented in 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