MDB 5 React Pro plugins installation guide

Manual installation (zip package)

Step 1

Download the package from orders.

Step 2

Unzip the downloaded package and open it in the code editor. You will find 5 folders there:

  • public - containing all public files (i.e. index.html)
  • plugins - containing archives with plugins.
  • src - containing clear App source code.

Step 3

If you decide to use only a few plugins, we suggest to import only these plugins. To do this you need to make the following changes in the package.json and index.js files:

Add the path to the archives of plugins you want to use in the package.json. Eg Table Editor: 


            "mdb-react-table-editor": "./plugins/mdb-react-table-editor-1.0.0.tgz"

Import css styles in the index.js file, just before App.js import. Eg Table Editor: 


            import 'mdb-react-table-editor/dist/css/table-editor.min.css';

Step 4

Explore our documentation (plugins section in the menu on the left). Choose plugin you like, copy it to your project and compose your website. And yes, it's that simple!

MDB 5 Plugins React installation and usage

NPM - new project

Prerequisites

Before starting a project make sure to install Node LTS (12.x.x recommended) and generate gitlab access token.

Installation

Note: For this instruction, we will use the Table Editor plugin as an example. If you want to use a different plugin remember to change the plugin names and paths.

To install the MDB React UI KIT in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation. 


        npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-advanced

Then install the plugins you want to use: 


        npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/react/mdb5/plugins/prd/table-editor

Importing JS modules (in App.js or other components


        import { MDBContainer, MDBRow /* ... other lib componentss */ } from 'mdb-react-ui-kit'; // import components you want from core package
        import { MDBTableEditor } from 'mdb-react-table-editor'; // import plugin

Importing CSS files (in index.js, just before importing main app)

To import MDB React stylesheet please use the following syntax: 


        import 'mdb-react-ui-kit/dist/css/mdb.min.css'; // lib
        import 'mdb-react-table-editor/dist/css/table-editor.min.css'; // plugin

Importing SCSS modules

You can also import individual SCSS modules. To do it properly, we recommend to copy them from the node_modules/mdb-react-ui-kit/dist/scss and node_modules/mdb-react-table-editor/dist/scss location directly to your project and import in the same way as CSS files.

NPM - existing project

Prerequisites

Before starting a project make sure to install Node LTS (12.x.x recommended) and generate gitlab access token.

Installation

Note: For this instruction, we will use the Table Editor plugin as an example. If you want to use a different plugin remember to change the plugin names and paths.

To install plugin in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation. 


        npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/react/mdb5/plugins/prd/table-editor

Importing JS modules


        import { MDBTableEditor } from 'mdb-react-table-editor';

Importing CSS file

To import the plugin stylesheet please use the following syntax: 


        import 'mdb-react-table-editor/dist/css/table-editor.min.css';

Importing SCSS modules

You can also import individual SCSS modules. To do it properly, we recommend to copy them from the node_modules/mdb-react-ui-kit/dist/css and node_modules/mdb-react-table-editor/dist/scss location directly to your project and import in the same way as CSS files.