The Modus React Bootstrap is a React-based component library extended from react-bootstrap component library developed as a common, open source platform for all of Trimble’s web applications built on React. The framework is designed and managed by the Trimble UX Council.
Background
Modus React Bootstrap is built upon and extends the React Bootstrap v1.6.x code framework combined with Modus CSS. You can use the Modus CSS files as is, or integrate the SASS files into your own application if you wish to modify it further.
Install with npm
Install the Modus React Bootstrap framework in your Node.js powered apps with npm (or yarn):
Please note that react >= 16.8.0 and react-dom >= 16.8.0 are peer dependencies.
Stylesheets
Modus React Bootstrap comes with its own style sheets extended from Modus Bootstrap v1.5.3. The compiled CSS files can be found in the /css/dist directory.
Customize using Sass
The Sass files will be found in the /scss directory. With Sass files, you can begin to modify any of the Sass variables and maps in your custom style sheet.
The main file to focus on is the _light-theme.scss file (and/or_dark-theme.scss if you want a dark look).
Icons
Modus icons style sheet is also required to use the Modus React components:
Learn more about using the icons.
Importing Components
Import individual components like as @trimbleinc/modus-react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.
Browser Support
Modus React Bootstrap supports all browsers supported by Modus Bootstrap.