React integration
Start with the installation of Fluid Design System in the React framework
Installation
So make sure to use version 3.1 to get the most out of Fluid Design System.
To consume Fluid Design System with React.js, the best way is via npm
(or yarn
if you prefer).
npm install @engie-group/fluid-design-system
Fonts and icons
The Fluid Design System uses the Lato font as global font family, read more about the typography bias on the dedicated section.
ENGIE has selected the Google material font as default icons pack, read more on the icons documentation.
Be sure to include these fonts into the main CSS file app.css
(or scss
, less
, etc… according to your suitability).
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap');
Stylesheets
Add stylesheets of library in your project with import
. You can be included it in your src/index.js
or App.js
file.
CSS version
Import the entire library
// index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// Import CSS Fluid Design System
import '@engie-group/fluid-design-system/lib/fluid-design-system.css';
… or an alternatively component
// index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// Import CSS Fluid Design System
import '@engie-group/fluid-design-system/lib/reboot.css';
import '@engie-group/fluid-design-system/lib/components/button/index.css';
SCSS version
In the first instance, create an index.scss
and add the following lines:
// index.scss file
// Required if you choose full SCSS file or icon component
// Configure font path to switch resolve-url-loader webpack config
$icon-font-path: '~@engie-group/fluid-design-system/src/components/icon/fonts/';
// 1- You can import full SCSS files like this:
@import "~@engie-group/fluid-design-system/src/fluid-design-system.scss";
// 2- Or import an alternatively component in SCSS version:
// import '~@engie-group/fluid-design-system/src/reboot.scss';
// import '~@engie-group/fluid-design-system/src/components/button/_index.scss';
Then, import this file into your React application like this:
// index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// Import SCSS Fluid Design System
import './index.scss';
JavaScript
NEW
Automatic component initialization
Set an id attribute named root
on a global container from where components will be watched for initialization.
<div id="root"></div>
Import lib/fluid-design-system.js
then lib/auto-init.js
directly in your main app code.
import '@engie-group/fluid-design-system';
import '@engie-group/fluid-design-system/lib/auto-init';
Don’t use custom tags unless you want to.
<nj-alert> <- remove custom tag
<div class="nj-alert nj-alert--primary" role="alert">
...
</div>
Initialization via WebComponents
1) Install additional modules
Required npm modules |
---|
Popper.js |
web-animations-js |
@webcomponents/webcomponentsjs |
@webcomponents/custom-elements |
If your application build es5 javascript, you need to include custom-elements-es5-adapter.js
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
If your application must be compatible with browser not supporting custom tag, you also have to install the @webcomponents/custom-elements
polyfill:
import '@webcomponents/custom-elements/custom-elements.min.js';
3) Initiate components
Import the library
// src/App.js
import React, { useEffect } from 'react';
import { NJWC } from '@engie-group/fluid-design-system/lib-esm/fluid-design-system';
...
const App = () => {
...
useEffect(() => {
// Initialize every components
NJWC.AutoInit();
}, []);
...
}
export default App;
Import a single component
// src/App.js
import React, { useEffect } from 'react';
import { FormWC } from '@engie-group/fluid-design-system/lib-esm/components/form';
const App = () => {
...
useEffect(() => {
FormWC.init();
}, []);
...
}
export default App;
Example
You could have a look at a todo list application example.
Troubleshooting
If you have any issues while getting set up with Fluid Design System, please create an issue or a request on our library git repository.