MDB React & Gatsby JS integration

MDB React & Gatsby JS integration

MDB React integration with Gatsby JS. Installation, various examples of implementation and much more.

Lets see how to integrate Gatsby.js with MDB 5 across our layout, components, and utilities.

Creating Gatsby JS app

Prerequisites

Before starting the project make sure to install Node LTS (14.15 or newer).

Step 1

Create a new Gatsby app.

You can learn more about Gatsby in their official documentation.

        
            
      npm init gatsby

Answear to few questions, here is an example for our tutorial

  • name of your site - My Gatsby Site
  • folder name - gatsbyjs/my-gatsby-site
  • choose between JavaScript or TypeScript - JavaScript
  • CMS - No (or I'll add it later)
  • styling system - No (or I'll add it later)
  • installation of other plugins - Done

Step 2

Navigate to app's directory.

        
            
      cd my-gatsby-site

MDB installation

Step 1

Setup MDB.

        
            
      npm i mdb-react-ui-kit

Font Awesome

Install Font Awesome. 

        
            
        npm i @fortawesome/fontawesome-free

CSS import

Add the following lines in pages/index.js file. 

        
            
        import 'mdb-react-ui-kit/dist/css/mdb.min.css'
        import "@fortawesome/fontawesome-free/css/all.min.css"

Step 2

Launch your app.

        
            
      npm run develop

Usage

To use MDB React inside your Gatsby app simply navigate to pages/index.js and try the following example.

        
            
    import * as React from "react";
    import "mdb-react-ui-kit/dist/css/mdb.min.css";
    import "@fortawesome/fontawesome-free/css/all.min.css";
    import { MDBCarousel, MDBCarouselItem } from "mdb-react-ui-kit";

    const pageStyles = {
      color: "#232129",
      padding: 96,
      fontFamily: "-apple-system, Roboto, sans-serif, serif",
    };
    const headingStyles = {
      marginTop: 0,
      marginBottom: 64,
      maxWidth: 1080,
    };
    const headingAccentStyles = {
      color: "#663399",
    };

    const IndexPage = () => {
      return (
        <main style={pageStyles}>
          <h1 style={headingStyles}>
            Congratulations
            <br />
            <span style={headingAccentStyles}>
              β€” you just integrated MDB React with Gatsby! πŸŽ‰πŸŽ‰πŸŽ‰
            </span>
          </h1>
          <MDBCarousel showIndicators showControls fade>
            <MDBCarouselItem
              className="w-100 d-block"
              itemId={1}
              src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg"
              alt="..."
            >
              <h5>First slide label</h5>
              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </MDBCarouselItem>
            <MDBCarouselItem
              className="w-100 d-block"
              itemId={2}
              src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg"
              alt="..."
            >
              <h5>Second slide label</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </MDBCarouselItem>
            <MDBCarouselItem
              className="w-100 d-block"
              itemId={3}
              src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg"
              alt="..."
            >
              <h5>Third slide label</h5>
              <p>
                Praesent commodo cursus magna, vel scelerisque nisl consectetur.
              </p>
            </MDBCarouselItem>
          </MDBCarousel>
        </main>
      );
    };

    export default IndexPage;

    export const Head = () => <title>Home Page</title>;