MDB 5 React Optimization

Introduction

This guide describes in detail how to use the individual modules provided as part of the MDB REACT UI KIT to improve project performance and reduce the size of imported files.

Modules

Note: Since migration to Vite and Typescript in MDB React version 6.0.0 and higher the package is already optimized and there is no need to create separate modules.

MDB REACT UI KIT PRO includes most components as compiled modules. Instead of importing the entire library, which translates into a reduction in efficiency, we can choose only the modules that are used in the project. Thanks to this, we significantly reduce the amount of KB downloaded by the application. It can be reduced even several times!

However, separated modules often use MDB styles such as spacing, position, or grid, so we recommend importing lightweight MDB REACT UI KIT FREE as a core. It is contained in a package inside the free directory.

Here's a short instruction for importing a single module on the example of a Datepicker component:

Step 1

Download the package from orders

Step 2

Unzip downloaded package and open it in the code editor

Step 3

Install the dependencies

        
            
        npm install
    
        
    

Step 4

Add code of the basic example and import MDBDatepicker from modules instead of directly from mdb-react-ui-kit.

        
            
        import React, { useState } from 'react';
        import MDBDatepicker from 'mdb-react-ui-kit/modules/MDBDatepicker';

        export default function App() {
          const [datepickerValue, setDatepickerValue] = useState('');

          return (
            <MDBDatepicker value={datepickerValue} setValue={setDatepickerValue} inputStyle={{width: '22rem'}} />
          );
        }
      
        
    

Step 5

Replace mdb.min.css import with the lightweight free version.

        
            
        import "mdb-react-ui-kit/css/free/mdb.min.css";
      
        
    

Step 6

Run the application

        
            
        npm start