Yammer Teams Slack email

React integration

Start with the installation of Fluid Design System in the React framework

npm (tag) Fluid Licence

Installation

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.