Intro to Fluent UI React

I recently read about another interesting UI library called Fluent UI created by Microsoft which offers compatibility with Desktop, Android, and iOS devices. It is essential for apps wit Microsoft Office-like features and UI, having components with behaviors and graphics that resemble it. It fits with Microsoft products and sites like Office, OneNote, Azure DevOps etc.

Fluent UI also comes in two flavors; Fluent UI React and Fabric Core. According to Microsoft, for open-source react front-end framework applications, we can use fluent UI react to build user experience for various Microosft products. Fluent UI core is for non-react applications. It is a collection of CSS classes and Saas mixins, by using which we can access to colors, animations, fonts, icons and grid.

Installation

In your terminal:

npm install @fluentui/react

Usage

Example of a Fluent UI button

Import the Primary button in the app:

import React from 'react';  
import './App.css';  
import { PrimaryButton } from '@fluentui/react';  

function App() {  
  return (  
    <div className="App">  
      <div className="App-header">  
        <PrimaryButton>Button</PrimaryButton>  
      </div>  
    </div>  
  );  
}   

export default App;  

Fabric UI React

It is also possible to use Fluent UI with the Fabric Core which provides some react controls like:

• Input Controls: Button, ComboBox, Checkbox, Dropdown, ChoiceGroip, Label, SearchBox, TextField, SpinButton, Rating, Toggle, Slider etc.
• Galleries & Pickers: Calendar, PeoplePicker, ColorPicker, Pickers, DatePicker, etc.
• Items & Lists: ActivityItem, DetailsList, Persona, DocumentCard, Hover Card, Basic List, etc.
• Commands, Menus & Navs: Breadcrumb, CommandBar, ContextualMenu, Nav, etc.
• Notification & Engagement: MessageBar, TeachingBubble, Coachmark
• Progress: ProgressIndicator, Shimmer, Spinner
• Surfaces: Callout, Dialog, Modal, Tooltip, ScrollablePane, Panel etc.
• Utilities: Icon, Stack, Text, Selection, Separator, Keytips, Image, MarqueeSelection, etc.
• Experimental: Card

Example of a Fabric UI Button

Import the button in your app:

Import { DefaultButton, PrimaryButton} from 'office-ui-fabric-react';

And add the buttons <DefaultButton text="Standard" onClick={clickhere} /> and <PrimaryButton text="Primary" onClick={clickhere} />

Example of how it would look like in default React page:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react';

function App() {
    return (
        <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <DefaultButton text="Standard" onClick={clickhere} />
        <br/>
      <PrimaryButton text="Primary" onClick={clickhere} />
      </header>

    </div>
  );   
}

function clickhere() {
    alert('Click Here')
}

export default App;

This is just a brief overview of Fluent UI and its features. On the official site, you can read more on it.

References

• https://developer.microsoft.com/en-us/fluentui#/
• https://www.spguides.com/fluent-ui/#Fluent_UI_8211_Fabric_UI_React_Example
• https://blogs.ibs.com/2020/06/30/the-pros-and-cons-of-fluent-ui-react/