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.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!
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, /* ... 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/scss
and
node_modules/mdb-react-table-editor/dist/scss
location directly to your project and
import in the same way as CSS files.