MDBootstrap React

https://mdbootstrap.com/docs/react/
Admin
MDBootstrap React provides over 700 Material Design UI components and templates for Bootstrap 5 &...
Tokens:688,451
Snippets:4,270
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install dependencies and start application

Source: https://mdbootstrap.com/docs/react/pro/installation

Commands to install project dependencies and launch the development server for manual zip installations.

```bash
npm install
```

```bash
npm start
```

--------------------------------

### Color Filter Setup

Source: https://mdbootstrap.com/docs/react/plugins/filters

Initializes the example data and state management for a color-based filtering system.

```jsx
import React, { useEffect, useState } from 'react';
import { MDBCol, MDBRow, MDBRadio, MDBBtn, MDBCardText, MDBCardBody, MDBCard, MDBRipple } from 'mdb-react-ui-kit';
import { MDBFilters } from 'mdb-react-filters';

export const exampleData = [
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },

  {
    name: 'Blue Jeans Jacket',
    price: 90,
    color: 'blue',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
  {
    name: 'Red Hoodie',
    oldPrice: 150,
    price: 120,
    color: 'red',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
];

export default function App() {
  const [colorFilters, setColorFilters] = useState({ color: '' });
  const [colorData, setColorData] = useState(exampleData);

  const onChangeColor = (e) => {
    setColorFilters({ ...colorFilters, [e.target.name]: e.target.value });
  };
```

--------------------------------

### MDBDatepicker Configuration Examples

Source: https://mdbootstrap.com/docs/react/forms/datepicker

Various configuration examples for the MDBDatepicker component.

```jsx
<MDBDatepicker cancelBtnText='QUIT' />
```

```jsx
<MDBDatepicker clearBtnText='RESET' />
```

```jsx
<MDBDatepicker closeOnEsc={false} />
```

```jsx
<MDBDatepicker customIcon='fas fa-calendar' />
```

```jsx
 <MDBDatepicker customHeader={<p>Custom content</p>}/>                 
```

```jsx
<MDBDatepicker defaultValue='13/04/2023' />
```

```jsx
<MDBDatepicker disableFuture />
```

```jsx
<MDBDatepicker disablePast />
```

```jsx
<MDBDatepicker disablePortal />
```

```jsx
<MDBDatepicker format='dd-mm-yyyy' />
```

```jsx
<MDBDatepicker inline />
```

```jsx
<MDBDatepicker inputToggle />
```

```jsx
<MDBDatepicker inputId="example-id" />
```

```jsx
<MDBDatepicker inputLabel='Pick date' />
```

```jsx
<MDBDatepicker max={new Date(2021, 10, 14)}/>
```

```jsx
<MDBDatepicker min={new Date(2020, 5, 10)} />
```

```jsx
<MDBDatepicker monthsFull={customMonthsFull} />
```

```jsx
<MDBDatepicker monthsShort={customMonthsShort} />
```

```jsx
<MDBDatepicker okBtnText='Accept' />
```

```jsx
<MDBDatepicker startDay={1} />
```

```jsx
<MDBDatepicker title='Datepicker' />
```

```jsx
<MDBDatepicker value={datepickerValue} onChange={(date) => setDatepickerValue(date)} />
```

```jsx
<MDBDatepicker views='months' />
```

```jsx
<MDBDatepicker weekdaysFull={customWeekdaysFull} />
```

```jsx
<MDBDatepicker weekdaysNarrow={customWeekdaysNarrow} />
```

```jsx
<MDBDatepicker weekdaysShort={customWeekdaysShort} />
```

```jsx
<MDBDatepicker wrapperClass="class" />
```

```jsx
<MDBDatepicker selectOnClick />
```

--------------------------------

### MDBTabsItem Component Examples

Source: https://mdbootstrap.com/docs/react/navigation/tabs

Examples for configuring the MDBTabsItem component properties.

```jsx
<MDBTabsItem className="class" />
```

```jsx
<MDBTabsItem ref={someRef} />
```

```jsx
<MDBTabsItem tag="a" />
```

--------------------------------

### Install dependencies

Source: https://mdbootstrap.com/docs/react/getting-started/optimization

Install the necessary project dependencies via npm.

```bash
npm install
```

--------------------------------

### Install Dependencies

Source: https://mdbootstrap.com/docs/react/extended/contact

Command to install required Node.js packages for the backend server.

```bash
// terminal
npm install express nodemailer express-validator multer dotenv cors
```

--------------------------------

### MDBProgressBar API Examples

Source: https://mdbootstrap.com/docs/react/components/progress

Examples demonstrating the usage of MDBProgressBar properties.

```jsx
<MDBProgress><MDBProgressBar tag="section"/></MDBProgress>
```

```jsx
<MDBProgress><MDBProgressBar bgColor="success"/></MDBProgress>
```

```jsx
<MDBProgress><MDBProgressBar striped></MDBProgress>
```

```jsx
<MDBProgress><MDBProgressBar animated></MDBProgress>
```

```jsx
<MDBProgress><MDBProgressBar valuenow="10"></MDBProgress>
```

```jsx
<MDBProgress><MDBProgressBar valuemin="10"></MDBProgress>
```

```jsx
<MDBProgress><MDBProgressBar valuemax="10"></MDBProgress>
```

```jsx
<MDBProgress><MDBProgressBar valuemax="10"></MDBProgress>
```

--------------------------------

### MDBProgress API Examples

Source: https://mdbootstrap.com/docs/react/components/progress

Examples demonstrating the usage of MDBProgress properties.

```jsx
<MDBProgress tag="section"><MDBProgressBar/></MDBProgress>
```

```jsx
<MDBProgress :height="10"><MDBProgressBar/></MDBProgress>
```

--------------------------------

### MDBTableEditor Properties Examples

Source: https://mdbootstrap.com/docs/react/plugins/table-editor

Examples demonstrating the usage of various MDBTableEditor properties.

```jsx
<MDBTableEditor actionHeader='custom header' />
```

```jsx
<MDBTableEditor actionPosition='end' />
```

```jsx
 <MDBTableEditor advancedSearch={[ { text: 'All columns', value: '' }, { text: 'Company', value: 'company' }, { text: 'Office', value: 'office' }, ]} />
```

```jsx
<MDBTableEditor allText='test' />
```

```jsx
<MDBTableEditor bordered />
```

```jsx
<MDBTableEditor borderless />
```

```jsx
<MDBTableEditor borderColor='red' />
```

```jsx
<MDBTableEditor cancelText='Cancel' /> 
```

```jsx
<MDBTableEditor confirmText='custom confirm text' /> 
```

```jsx
<MDBTableEditor confirmMessage='custom confirm message' /> 
```

```jsx
<MDBTableEditor color='primary' />
```

```jsx
<MDBTableEditor data={data} />
```

```jsx
<MDBTableEditor dark />
```

```jsx
<MDBTableEditor editable />
```

```jsx
<MDBTableEditor editItemHeader='Adding item' />
```

```jsx
<MDBTableEditor entries={25} />
```

```jsx
<MDBTableEditor entriesOptions=[10, 20, 60] />
```

```jsx
<MDBTableEditor fixedHeader />
```

```jsx
<MDBTableEditor format={(field, value) => {                         if (field === 'age' && value > 60) {                           return { backgroundColor: '#999' };                         }           }} />           
```

```jsx
<MDBTableEditor fullPagination />
```

```jsx
<MDBTableEditor hover />
```

```jsx
<MDBTableEditor isLoading />
```

```jsx
<MDBTableEditor loaderClass='bg-warning' />
```

```jsx
<MDBTableEditor loadingMessage='Loading...' />
```

```jsx
<MDBTableEditor maxWidth='560px' />
```

```jsx
<MDBTableEditor maxHeight='560px' />
```

```jsx
<MDBTableEditor mode='modal' />
```

```jsx
<MDBTableEditor newItemHeader='Adding item' />
```

```jsx
<MDBTableEditor noFoundMessage='Not found...' />
```

```jsx
<MDBTableEditor ofText='z' />
```

--------------------------------

### MDBModal Property Examples

Source: https://mdbootstrap.com/docs/react/components/modal

Usage examples for various MDBModal configuration properties.

```jsx
<MDBModal animationDirection="top" />
```

```jsx
<MDBModal appendToBody />
```

```jsx
<MDBModal backdrop={false} />
```

```jsx
<MDBModal closeOnEsc={false} />
```

```jsx
<MDBModal leaveHiddenModal={false} />
```

```jsx
<MDBModal modalRef={modalReference} />
```

```jsx
<MDBModal nonInvasive={true} />
```

```jsx
<MDBModal setOpen={setExample} />
```

```jsx
<MDBModal open={true} />
```

```jsx
<MDBModal staticBackdrop />
```

```jsx
<MDBModal tag="section" />
```

--------------------------------

### MDBVectorMap Property Examples

Source: https://mdbootstrap.com/docs/react/plugins/vector-maps

Examples demonstrating the usage of various properties for the MDBVectorMap component.

```jsx
<MDBVectorMap className="class" />
```

```jsx
<MDBVectorMap map='africa' />
```

```jsx
<MDBVectorMap hoverFill='#fff' />
```

```jsx
<MDBVectorMap selectRegion='PL' />
```

```jsx
<MDBVectorMap readonly />
```

```jsx
<MDBVectorMap selectFill='#fff' />
```

```jsx
<MDBVectorMap mapRef={customRef} />
```

```jsx
<MDBVectorMap zoomMax={3} />
```

```jsx
<MDBVectorMap zoomMin={0.2} />
```

```jsx
<MDBVectorMap zoomStep={0.1} />
```

```jsx
<MDBVectorMap zoomEvents={false} />
```

```jsx
<MDBVectorMap scale={3} />
```

```jsx
<MDBVectorMap colorMap={[ { fill: '#fff', regions: ['PL', 'US', 'GB']} ]} />
```

```jsx
<MDBVectorMap hover={false} />
```

```jsx
<MDBVectorMap fill='#fff' />
```

```jsx
<MDBVectorMap width='500px' />
```

```jsx
<MDBVectorMap height='500px' />
```

```jsx
<MDBVectorMap fillOpacity={0.5} />
```

```jsx
<MDBVectorMap stroke='#fff' />
```

```jsx
<MDBVectorMap strokeOpacity={0.1} />
```

```jsx
<MDBVectorMap strokeWidth={0} />
```

```jsx
<MDBVectorMap strokeLinejoin='bevel' />
```

```jsx
<MDBVectorMap tooltips={false} />
```

```jsx
<MDBVectorMap markers={[ { x: 233, y: 233, type: 'bullet' } ]} />
```

```jsx
<MDBVectorMap markerFill='#fff' />
```

```jsx
<MDBVectorMap markerStroke='#fff' />
```

```jsx
<MDBVectorMap markerInnerFill='#fff' />
```

```jsx
<MDBVectorMap markerStrokeWidth={2} />
```

```jsx
<MDBVectorMap btnClass='btn-dark' />
```

```jsx
<MDBVectorMap mapRef={someRef} />
```

--------------------------------

### Advanced Data Visualization Setup

Source: https://mdbootstrap.com/docs/react/plugins/vector-maps

Initialize state variables for managing interactive map displays, including markers, colors, and legend data.

```jsx
import React, { useState, useEffect } from 'react';
import { MDBBtn } from 'mdb-react-ui-kit';
import {
  MDBVectorMap
} from 'mdb-react-vector-maps';

export default function App() {
  const [activeKey, setActiveKey] = useState('sales');
  const [activeColor, setActiveColor] = useState('green');
  const [advancedColorMap, setAdvancedColorMap] = useState([]);
  const [advancedMarkers, setAdvancedMarkers] = useState<any[]>([]);
  const [advancedLegend, setAdvancedLegend] = useState(null);
  const [advancedMin, setAdvancedMin] = useState('0');
  const [advancedMax, setAdvancedMax] = useState('0');
  const [allowBullets, setAllowBullets] = useState(false);
```

--------------------------------

### Start the application

Source: https://mdbootstrap.com/docs/react/getting-started/optimization

Run the development server.

```bash
npm start
```

--------------------------------

### Initialize React Project

Source: https://mdbootstrap.com/docs/react/getting-started/installation

Create a new React application using npx.

```bash
npx create-react-app my-app
```

--------------------------------

### Position Grid Items with Start Classes

Source: https://mdbootstrap.com/docs/react/layout/css-grid

Use start classes as a shorthand for grid-column-start to position elements within the grid. Start values begin at 1.

```jsx
import React from 'react';

export default function App() {
  return (
    <div className='grid'>
      <div className='g-col-3 g-start-2'>.g-col-3 .g-start-2</div>
      <div className='g-col-4 g-start-6'>.g-col-4 .g-start-6</div>
    </div>
    );
```

--------------------------------

### Launch Development Server

Source: https://mdbootstrap.com/docs/react/getting-started/next

Start the Next.js development server.

```bash
npm run dev
```

--------------------------------

### Initialize Basic Onboarding

Source: https://mdbootstrap.com/docs/react/plugins/onboarding

Uses the MDBOnboarding component to wrap elements and define tour steps via refs.

```JSX
import React from 'react';
import {
  MDBContainer,
  MDBCol,
  MDBRow,
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBIcon,
} from 'mdb-react-ui-kit';
import { MDBOnboarding } from 'mdb-react-onboarding';

export default function App() {
  const basicRef1 = useRef(null);
  const basicRef2 = useRef(null);
  const basicRef3 = useRef(null);

  return (
    <MDBOnboarding
      starter={basicRef1}
      steps={[
        {
          ref: basicRef1,
          content: 'This button has just started your onboarding',
        },
        {
          ref: basicRef2,
          content: 'This is just basic example of initial onboarding options and configurations',
        },
        {
          ref: basicRef3,
          content: 'There is many more options in the examples below',
        },
      ]}
    >
      <MDBContainer>
        <MDBRow className='justify-content-center'>
          <MDBCol md='3' className='text-center'>
            <MDBBtn ref={basicRef1} color='danger'>
              Start onboarding
            </MDBBtn>
          </MDBCol>
        </MDBRow>
        <hr />
        <MDBRow className='d-flex justify-content-center'>
          <MDBCol md='4'>
            <MDBCard>
              <img
                className='card-img-top'
                src='https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp'
                alt='Man in Cap and Glasses'
              />
              <a>
                <div className='mask rgba-white-slight'></div>
              </a>

              <MDBCardBody className='text-center'>
                <MDBCardTitle ref={basicRef2}>
                  <strong>John Doe</strong>
                </MDBCardTitle>

                <h6 className='fw-bold indigo-text py-2'>Web developer</h6>

                <MDBCardText>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
                  modi sunt, quod quibusdam.
                </MDBCardText>

                <div className='d-flex justify-content-evenly'>
                  <a href='#!' role='button'>
                    <MDBIcon fab icon="facebook-f" size="lg" />
                  </a>

                  <a href='#!' role='button'>
                    <MDBIcon fab icon="twitter" size="lg" />
                  </a>

                  <a href='#!' role='button' ref={basicRef3}>
                    <MDBIcon fab icon="dribbble" size="lg" />
                  </a>
                </div>
              </MDBCardBody>
            </MDBCard>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    </MDBOnboarding>
  );
}
```

--------------------------------

### MDBInputMask API Examples

Source: https://mdbootstrap.com/docs/react/plugins/input-mask

Various usage examples for MDBInputMask properties.

```jsx
<MDBInputMask charPlaceholder='-' maskPlaceholder />
```

```jsx
<MDBInputMask clearIncomplete={false} />
```

```jsx
<MDBInputMask customMask='p' />
```

```jsx
<MDBInputMask customValidator='[abc]' />
```

```jsx
<MDBInputMask inputMask='aaa999***' />
```

```jsx
<MDBInputMask inputPlaceholder={false} />
```

```jsx
<MDBInputMask label='example' />
```

```jsx
<MDBInputMask maskPlaceholder />
```

--------------------------------

### MDBTabsPane Component Examples

Source: https://mdbootstrap.com/docs/react/navigation/tabs

Examples for configuring the MDBTabsPane component properties.

```jsx
<MDBTabsPane className="class" />
```

```jsx
<MDBTabsPane ref={someRef} />
```

```jsx
<MDBTabsPane open />
```

```jsx
<MDBTabsPane tag="section" />
```

--------------------------------

### Initialize React project via NPM

Source: https://mdbootstrap.com/docs/react/pro/installation

Commands to create a new React application and navigate into the project directory.

```bash
npx create-react-app my-app
```

```bash
cd my-app
```

--------------------------------

### Navigate to Project Directory

Source: https://mdbootstrap.com/docs/react/getting-started/gatsby

Command to enter the newly created project folder.

```bash
cd my-gatsby-site
```

--------------------------------

### MDBTabsLink Component Examples

Source: https://mdbootstrap.com/docs/react/navigation/tabs

Examples for configuring the MDBTabsLink component properties.

```jsx
<MDBTabsLink active />
```

```jsx
<MDBTabsLink className="class" />
```

```jsx
<MDBTabsLink color='danger' />
```

```jsx
<MDBTabsLink ref={someRef} />
```

--------------------------------

### Configure package.json start scripts

Source: https://mdbootstrap.com/docs/react/extended/contact

Add these scripts to your package.json file to enable server execution and development mode.

```json
// package.json

"start": "node server.js",
"start:dev" : "nodemon server.js"
```

--------------------------------

### Initialize Gatsby Project

Source: https://mdbootstrap.com/docs/react/getting-started/gatsby

Command to scaffold a new Gatsby application.

```bash
npm init gatsby
```

--------------------------------

### MDBMultiCarouselItem Configuration Examples

Source: https://mdbootstrap.com/docs/react/plugins/multi-item-carousel

Examples demonstrating how to configure various properties for the MDBMultiCarouselItem component.

```jsx
<MDBMultiCarouselItem alt='Image 1' />
```

```jsx
<MDBMultiCarouselItem caption='Test caption' />
```

```jsx
<MDBMultiCarouselItem disabled />
```

```jsx
<MDBMultiCarouselItem fullscreenSrc='...' />
```

```jsx
<MDBMultiCarouselItem imageClassName='Test' />
```

```jsx
<MDBMultiCarouselItem multiCarouselItemRef={someRef} />
```

```jsx
<MDBMultiCarouselItem src='...' />
```

--------------------------------

### MDBDatatable Property Examples

Source: https://mdbootstrap.com/docs/react/data/datatables

Usage examples for various MDBDatatable properties.

```jsx
<MDBDatatable allText='test' />
```

```jsx
<MDBDatatable bordered />
```

```jsx
<MDBDatatable borderless />
```

```jsx
<MDBDatatable borderColor='red' />
```

```jsx
<MDBDatatable color='primary' />
```

```jsx
<MDBDatatable data={data} />
```

```jsx
<MDBDatatable dark />
```

```jsx
<MDBDatatable editable />
```

```jsx
<MDBDatatable entries={25} />
```

```jsx
<MDBDatatable entriesOptions=[10, 20, 60] />
```

```jsx
<MDBDatatable fixedHeader />
```

```jsx
<MDBDatatable fullPagination />
```

```jsx
<MDBDatatable hover />
```

```jsx
<MDBDatatable isLoading />
```

```jsx
<MDBDatatable loaderClass='bg-warning' />
```

```jsx
<MDBDatatable loaderClass='Loading...' />
```

```jsx
<MDBDatatable maxWidth='560px' />
```

```jsx
<MDBDatatable maxHeight='560px' />
```

```jsx
<MDBDatatable selectable multi />
```

```jsx
<MDBDatatable noFoundMessage='Not found...' />
```

```jsx
<MDBDatatable ofText='/' />
```

```jsx
<MDBDatatable pagination={false} />
```

```jsx
<MDBDatatable rowsText='Rows:' />
```

```jsx
<MDBDatatable search />
```

```jsx
<MDBDatatable selectable />
```

```jsx
<MDBDatatable sm />
```

```jsx
<MDBDatatable striped />
```

```jsx
<MDBDatatable sortField='ColumnName' />
```

```jsx
<MDBDatatable sortField='ColumnName' sortOrder='desc' />
```

```jsx
<MDBDatatable searchInputProps={{ className='test' }} />
```

--------------------------------

### MDBStepper Property Examples

Source: https://mdbootstrap.com/docs/react/components/stepper

Usage examples for various MDBStepper properties.

```jsx
<MDBStepper defaultStep={3} />
```

```jsx
<MDBStepper disableHeadSteps />
```

```jsx
<MDBStepper externalNext={nextRef} />
```

```jsx
<MDBStepper externalPrev={prevRef} />
```

```jsx
<MDBStepper linear />
```

```jsx
<MDBStepper mobileOfLabel='at' />
```

```jsx
<MDBStepper mobileStepLabel='element' />
```

```jsx
<MDBStepper mobileBackLabel='PREV' />
```

```jsx
<MDBStepper mobileNextLabel='NXT' />
```

```jsx
<MDBStepper type='mobile' mobileProgress />
```

```jsx
<MDBStepper noEditable />
```

```jsx
<MDBStepper type='vertical' />
```

--------------------------------

### Launch Development Server

Source: https://mdbootstrap.com/docs/react/getting-started/gatsby

Start the Gatsby development server.

```bash
npm run develop
```

--------------------------------

### MDBToast Property Examples

Source: https://mdbootstrap.com/docs/react/components/toasts

Usage examples for various MDBToast properties.

```jsx
<MDBToast appendToBody />
```

```jsx
<MDBToast autohide />
```

```jsx
<MDBToast bodyClasses="class" />
```

```jsx
<MDBToast bodyContent={ Sample } />
```

```jsx
<MDBToast closeBtnClasses="class" />
```

```jsx
<MDBToast color='secondary' />
```

```jsx
<MDBToast containerRef={containerReference} />
```

```jsx
<MDBToast delay={2000} />
```

```jsx
<MDBToast headerClasses="class" />
```

```jsx
<MDBToast headerContent={ Sample } />
```

```jsx
<MDBToast position='top-right' />
```

```jsx
<MDBToast open />
```

```jsx
<MDBToast defaultOpen />
```

```jsx
<MDBToast toastRef={toastRefference} />
```

```jsx
<MDBToast width={300} />
```

```jsx
<MDBAlert initialAnimation />
```

```jsx
<MDBAlert animationVariants={ {open: { opacity: 1 }, closed: { opacity: 0 }} } />
```

--------------------------------

### MDBMultiCarousel Configuration Examples

Source: https://mdbootstrap.com/docs/react/plugins/multi-item-carousel

Examples demonstrating how to configure various properties for the MDBMultiCarousel component.

```jsx
<MDBMultiCarousel breakpoint={1200} />
```

```jsx
<MDBMultiCarousel interval={2000} />
```

```jsx
<MDBMultiCarousel items={4} />
```

```jsx
<MDBMultiCarousel lightbox />
```

```jsx
<MDBMultiCarousel multiCarouselRef={someRef} />
```

```jsx
<MDBMultiCarousel vertical />
```

--------------------------------

### Create Next.js Application

Source: https://mdbootstrap.com/docs/react/getting-started/next

Initialize a new Next.js project and navigate into the directory.

```bash
npx create-next-app@latest
cd my-app
```

--------------------------------

### Main App Component Structure

Source: https://mdbootstrap.com/docs/react/extended/react-loops

Initial setup of the App component using MDBContainer and MDBRow.

```JSX
class App extends Component {
  state = {};
  render() {
    return (
      <React.Fragment>
        <MDBContainer>
          <MDBRow>
            <MDBCol md="9">
              <Event title="Meeting with John" time="10:00" />
            </MDBCol>
            <MDBCol md="3" />
          </MDBRow>
        </MDBContainer>
      </React.Fragment>
    );
  }
}
```

--------------------------------

### MDBFilters Property Examples

Source: https://mdbootstrap.com/docs/react/plugins/filters

Usage examples for various MDBFilters component properties.

```jsx
<MDBFilters data={exampleData} />
```

```jsx
<MDBFilters filterData={setData} />
```

```jsx
<MDBFilters filterOptions={options} />
```

```jsx
<MDBFilters filters={exampleFilters} />
```

```jsx
<MDBFilters sortOptions={options} />
```

--------------------------------

### Implement a Comparison Card with Details

Source: https://mdbootstrap.com/docs/react/extended/comparison-table

Uses MDBootstrap React components to build a responsive pricing card with a split layout for content and purchase details.

```jsx
import React from "react";
import {
  MDBCard,
  MDBCardBody,
  MDBCol,
  MDBContainer,
  MDBIcon,
  MDBRow,
  MDBTypography,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer className="py-5">
      <MDBCard className="border overflow-hidden">
        <MDBCardBody className="px-0 py-0">
          <MDBRow>
            <MDBCol md="8" className="py-2 bg-white border">
              <div className="mx-4 my-4">
                <p className="h3 mb-3">
                  <strong>Lifetime Membership</strong>
                </p>
                <p className="text-muted">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Cupiditate quae deserunt excepturi nihil nobis. Hic dolores
                  architecto quod dicta, iusto odio, sit quae cum, quos alias
                  eveniet corrupti ab pariatur.
                </p>
                <p
                  className="text-uppercase text-primary mb-3 new-section"
                  style={{ fontSize: "14px" }}
                >
                  what’s included
                  <span className="line-pricing"></span>
                </p>

                <MDBRow>
                  <MDBCol md="6">
                    <MDBTypography listUnStyled className="mb-0 pt-0 pb-0">
                      <li className="mb-3">
                        <MDBIcon
                          fas
                          icon="check"
                          className="text-success me-3"
                        />
                        <small>Lorem Ipsum</small>
                      </li>
                      <li className="mb-3">
                        <MDBIcon
                          fas
                          icon="check"
                          className="text-success me-3"
                        />
                        <small>Lorem Ipsum</small>
                      </li>
                    </MDBTypography>
                  </MDBCol>
                  <MDBCol md="6">
                    <MDBTypography listUnStyled className="mb-0 pt-0 pb-0">
                      <li className="mb-3">
                        <MDBIcon
                          fas
                          icon="check"
                          className="text-success me-3"
                        />
                        <small>Lorem Ipsum</small>
                      </li>
                      <li className="mb-3">
                        <MDBIcon
                          fas
                          icon="check"
                          className="text-success me-3"
                        />
                        <small>Lorem Ipsum</small>
                      </li>
                    </MDBTypography>
                  </MDBCol>
                </MDBRow>
              </div>
            </MDBCol>
            <MDBCol
              md="4"
              className="text-center"
              style={{
                backgroundColor: "#F9FAFB",
                boxShadow: "0px 0px 10px 1px #aaaaaa",
              }}
            >
              <div className="mt-5 pt-4 me-4">
                <p className="h5">Pay once, own it forever</p>
                <p
                  className="h2 fw-bold text-black"
                  style={{ fontSize: "40px" }}
                >
                  $199
                  <small class="text-muted ms-2" style={{ fontSize: "15px" }}>
                    USD
                  </small>
                </p>
                <p
                  className="text-decoration-underline text-black-50 "
                  style={{ fontSize: "15px" }}
                >
                  Learn more about our company
                </p>
                <a
                  href="#"
                  className="btn btn-dark d-block mb-2 mt-3 text-capitalize"
                >
                  Get Access
                </a>
                <p className="fw-bold mt-3" style={{ fontSize: "13px" }}>
                  Get a free sample <span className="text-muted">(20MB)</span>
                </p>
              </div>
            </MDBCol>
          </MDBRow>
        </MDBCardBody>
      </MDBCard>
    </MDBContainer>
  );
}
```

--------------------------------

### Install MDB React UI Kit

Source: https://mdbootstrap.com/docs/react/getting-started/gatsby

Install the MDB React library via npm.

```bash
npm i mdb-react-ui-kit
```

--------------------------------

### MDBTransfer Properties Examples

Source: https://mdbootstrap.com/docs/react/plugins/transfer

Examples of how to use various properties with the MDBTransfer component.

```jsx
<MDBTransfer className="class" />
```

```jsx
<MDBTransfer dataTarget={{ text: 'Lorem ipsum', checked: true, disabled: false }} />
```

```jsx
<MDBTransfer dataSource={{ text: 'Lorem ipsum', checked: true, disabled: false }} />
```

```jsx
<MDBTransfer elementsPerPage={7} />
```

```jsx
<MDBTransfer oneWay />
```

```jsx
<MDBTransfer pagination />
```

```jsx
<MDBTransfer search />
```

```jsx
<MDBTransfer selectAll={false} />
```

```jsx
<MDBTransfer titleTarget='Target title example' />
```

```jsx
<MDBTransfer titleSource='Source title example' />
```

```jsx
<MDBTransfer targetArrowText='Transfer to the target' />
```

```jsx
<MDBTransfer sourceArrowText='Transfer to the source' />
```

--------------------------------

### MDBScrollStatus Properties Examples

Source: https://mdbootstrap.com/docs/react/plugins/scroll-status

Usage examples for various MDBScrollStatus component properties.

```jsx
<MDBScrollStatus className="class" />
```

```jsx
<MDBScrollStatus color='#000' />
```

```jsx
<MDBScrollStatus containerRef={someRef} />
```

```jsx
<MDBScrollStatus global />
```

```jsx
<MDBScrollStatus height='20px' />
```

```jsx
<MDBScrollStatus offset={10} />
```

```jsx
<MDBScrollStatus scroll={50} />
```

```jsx
<MDBScrollStatus triggerOnce={false} />
```

--------------------------------

### Navigate to Project Directory

Source: https://mdbootstrap.com/docs/react/getting-started/installation

Change the current working directory to the newly created project folder.

```bash
cd my-app
```

--------------------------------

### MDBNavbar property examples

Source: https://mdbootstrap.com/docs/react/navigation/navbar

Examples of how to apply various properties to the MDBNavbar component.

```jsx
<MDBNavbar tag="section" />
```

```jsx
<MDBNavbar color="white" />
```

```jsx
<MDBNavbar expand="lg" />
```

```jsx
<MDBNavbar bgColor="dark" />
```

```jsx
<MDBNavbar light />
```

```jsx
<MDBNavbar dark />
```

```jsx
<MDBNavbar color='danger' />
```

```jsx
<MDBNavbar fixed />
```

```jsx
<MDBNavbar sticky />
```

```jsx
<MDBNavbar transparent />
```

```jsx
<MDBNavbar scrolling />
```

```jsx
<MDBNavbar scrolling scrollingNavbarOffset={100}/>
```

```jsx
<MDBNavbar ref={someRef} />
```

--------------------------------

### MDBTooltip Property Examples

Source: https://mdbootstrap.com/docs/react/components/tooltips

Examples demonstrating the usage of various MDBTooltip properties for configuration.

```jsx
<MDBTooltip disableMouseDown>Tooltip</MDBTooltip>
```

```jsx
<MDBTooltip options={{ modifiers: [{ name: 'offset', options: { offset: [10, 20] }}]}}>Tooltip</MDBTooltip>
```

```jsx
<MDBTooltip placement="bottom">Tooltip</MDBTooltip>
```

```jsx
<MDBTooltip tag='span'>Tooltip</MDBTooltip>
```

```jsx
<MDBTooltip title="Hi! I'm a                   tooltip!">Tooltip</MDBTooltip>
```

```jsx
<MDBTooltip tooltipTag='span'>Tooltip</MDBTooltip>
```

```jsx
<MDBTooltip wrapperClass="class">Tooltip</MDBTooltip>
```

```jsx
<MDBTooltip wrapperProps={{ color: 'secondary' }}>Tooltip</MDBTooltip>
```

--------------------------------

### MDBParallax Property Examples

Source: https://mdbootstrap.com/docs/react/plugins/parallax

Examples of how to configure various properties for the MDBParallax component.

```jsx
<MDBParallax className='customClass' />
```

```jsx
<MDBParallax delay={1} />
```

```jsx
<MDBParallax direction='right' />
```

```jsx
<MDBParallax horizontalAlignment='left' />
```

```jsx
<MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp' alt='My custom img' />
```

```jsx
<MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp' />
```

```jsx
<MDBParallax maxHeight={400} />
```

```jsx
<MDBParallax maxTransition={40} />
```

```jsx
<MDBParallax overflow={true} />
```

```jsx
<MDBParallax scale={1.8} />
```

```jsx
<MDBParallax transition='ease' />
```

```jsx
<MDBParallax verticalAlignment='bottom' maxHeight={400} />
```

```jsx
<MDBParallax ref={myRef} />
```

--------------------------------

### MDBPaginationItem Property Examples

Source: https://mdbootstrap.com/docs/react/navigation/pagination

Usage examples for various MDBPaginationItem component properties.

```jsx
<MDBPaginationItem tag="section" />
```

```jsx
<MDBPaginationItem active />
```

```jsx
<MDBPaginationItem disabled />
```

```jsx
<MDBPaginationItem ref={someRef} />
```

--------------------------------

### Initialize Express Server

Source: https://mdbootstrap.com/docs/react/extended/contact

Main server entry point configured with middleware and API routes.

```javascript
const express = require("express");
const multer = require("multer");
const cors = require("cors");
const config = require("./config");
const routes = require("./routes");

const upload = multer();
const app = express();

app.use(cors());
app.use(upload.none());

app.use("/api", routes);

app.listen(config.PORT, () => {
  console.log(`Server is running on port ${config.PORT}.`);
});
```

--------------------------------

### MDBPagination Property Examples

Source: https://mdbootstrap.com/docs/react/navigation/pagination

Usage examples for various MDBPagination component properties.

```jsx
<MDBPagination tag="section" />
```

```jsx
<MDBPagination center />
```

```jsx
<MDBPagination circle />
```

```jsx
<MDBPagination end />
```

```jsx
<MDBPagination size="lg/sm" />
```

```jsx
<MDBPagination start />
```

```jsx
<MDBPagination ref={someRef} />
```
Tokens:
Raw