Back to List

Fabric React Primer on Components, Controls and Theming

Will Spiering Will Spiering  |  
Nov 12, 2019
 

React is one of the most used and beloved JavaScript libraries for building user interfaces. There's no shortage of UI frameworks out there to help make developing great React apps quicker and simpler. You may have heard of a couple of the really popular ones like React Bootstrap or Material UI, but there is another one that doesn't get as much attention: Fabric React.

Fabric React is the framework built on top of Microsoft's Fluent Design language, much like Material UI is built off of Google's Material Design. It's used by Microsoft on many of their products and sites from Outlook to Word, PowerPoint, and SharePoint.

Personally, I enjoy using it because I like how the styling is different than Bootstrap, and the documentation is really helpful with great examples and best practices for all their components.

 

Getting Started

It's easy to get started with Fabric in your React projects, whether you are starting from scratch or you intend to add it to an existing project.

To get familiar with all the controls and components in various frameworks, I usually like to spin up a demo environment in CodeSandbox. It's easy to add Fabric React to a project's dependencies by searching for "office-ui-fabric-react" from the Explorer panel in CodeSandbox.

If you want to add it to an existing React project, you can add the package with npm with:

npm install office-ui-fabric-react
 

Fabric Component

When building your app with Fabric, it is recommended that you wrap all your content in a Fabric component. This can be a replacement to your root div, and it brings default fonts and styling so your app looks consistent.

import { Fabric } from "office-ui-fabric-react";

function App() {
    return <Fabric>// All your components here</Fabric>;
}
 

Icons

fabric react icons

Fabric has a great icon library but they aren't included in the Fabric React package by default. Many controls use the icons so you will need to add the package and initialize them at the root of the app.

import { initializeIcons } from "@uifabric/icons";

initializeIcons();
 

Go to Controls

Now that you're ready to start building with Fabric, let's start adding some controls. These are some of the Fabric controls I use most often. I've included their individual imports and components with minimal props to get you up and running.

 

Buttons

import { Fabric, DefaultButton, PrimaryButton } from "office-ui-fabric-react";

<DefaultButton
          text="Standard"
          onClick={() => console.log("You clicked Standard")}
        />
  <PrimaryButton
          text="Primary"
          onClick={() => console.log("You clicked Primary")}
        />
 

ChoiceGroup

(See ChoiceGroup component options)
import { ChoiceGroup } from "office-ui-fabric-react";

<ChoiceGroup
    defaultSelectedKey="Bears"
    options={[
        {
            key: "Lions",
            text: "Lions",
            disabled: true,
        },
        {
            key: "Tigers",
            text: "Tigers",
        },
        {
            key: "Bears",
            text: "Bears",
        },
        {
            key: "Ohh my",
            text: "Ohh my",
        },
    ]}
    label="Pick one"
    required={true}
/>;
 

Slider

(See Slider options)
import { Slider } from "office-ui-fabric-react";

<Slider
    label="Pizza Size"
    min={10}
    max={24}
    step={1}
    defaultValue={18}
    showValue={true}
    onChange={(value: number) => console.log(value)}
/>;
 

DatePicker

import { DatePicker } from "office-ui-fabric-react";

<DatePicker placeholder="Select a date..." ariaLabel="Select a date" />;
 

Panel

(See Panel options)
import { Panel } from "office-ui-fabric-react";

<Panel
    isOpen={isPanelOpen}
    onDismiss={() => setIsPanelOpen(false)}
    isLightDismiss={true}
    headerText="Panel Header"
    closeButtonAriaLabel="Close"
>
    <h3>Panel Content Goes Here</h3>
    <p>Throw in your form inputs or more details on what you clicked on here.</p>
</Panel>;

There a ton of other controls, and I highly encourage you to check out the Controls page of the Fabric React documentation for the full list of controls.

 

Theming

fabric react theming designer

Fabric also has a theme designer that allows you to generate a theme by picking three colors and then preview the theme being applied to many of the Fabric controls.

It has a great accessibility checker built in that will flag issues where there isn't enough contrast between your selected colors. This will allow you to make changes to your selected colors on the fly to improve the accessibility of your application.

If you happen to be doing any SharePoint development one of the great things about the theme designer is that you can see all the Semantic Slots that are used throughout the controls. These semantic slots are used to allow your controls to dynamically change based on where they are used in SharePoint. For example; adding a list to a section of a page with a light background will have dark text, but if you were to add it to a dark background it will invert the text making it easier to read.

Give it a shot and after you have a theme that you like it's easy to export it to your app. You can just copy it to your app by clicking on the Export theme button and choosing how you would like to apply it to your app whether it being JavaScript, JSON, or PowerShell.

 

Final Words

Here is a sample sandbox with all the above mentioned controls being used. Go add more from the docs or update the theme palette with your own from the Theme Designer.

I hope you give Fabric React a try and maybe it will be the React framework that you reach for when you start your next project!

JavaScript

 

Love our Blogs?

Sign up to get notified of new Skyline posts.

 


Related Content


Spring 2019 Kentico User Group
Apr 17, 2019
Location: Waukesha County Technical College - Pewaukee Campus - 800 Main Street, Pewaukee, Wisconsin 53072 - Building: Q, Room: Q361
Blog Article
Using Hooks to Reactify a Plain JavaScript Library: A Walkthrough
Andrew PetersenAndrew Petersen  |  
Aug 06, 2019
React Hooks make it really easy to wrap a vanilla JavaScript library with a React component so you can easily reuse it throughout your app and stay in "React Mode".In this walkthrough I'll be focusing on a single library, Shave.js, but the techniques and ideas should be applicable...
Blog Article
How to Create a Readable and Useful Bug Report
Blayne RoselleBlayne Roselle  |  
Jun 25, 2019
Creating a bug that is both readable and provides enough detail is a must-have skill for a Quality Assurance Analyst. Not only will it help when it comes time to retest, but it also provides credibility with your development team. In the content below, I will share the best practices for creating...
Blog Article
Azure Tips & Tricks: Application Insights Snapshot Debugger
Todd TaylorTodd Taylor  |  
May 21, 2019
A painful memory that is burned into my developer-brain is a production support issue for a .NET web API that I wrote years ago. I worked for a large retailer at the time, and the bug was preventing electronic pricing signs from displaying the most up-to-date price for hundreds of products at...
Blog Article
Thinking Outside the Application Development Box with Unity
Jeff WeberJeff Weber  |  
May 14, 2019
Do you or your company have an idea for an application that sits a little outside your comfort zone? Does your idea possibly require game-like graphics, Augmented Reality, Virtual Reality or similar technology? If so, Unity might be worth a look.   I’ve been using Unity in my spare...