MDB React & Gatsby JS integration

How to use React with Gatsby JS - free starter

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

Answer 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>;