November 12, 2019

Fabric React Primer on Components, Controls and Theming

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, we enjoy using it because we 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, we 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 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 we use most often. I’ve included their individual imports and components with minimal props to get you up and running.

Buttons

See all 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

Learn more

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 we highly encourage you to check out the Controls page of the Fabric React documentation for the full list of controls.

Theming

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.

https://codesandbox.io/embed/fabric-react-playground-cy916?fontsize=14

We 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!

Learn more about our application modernization capabilities.

Subscribe to our Newsletter

Stay informed on the latest technology news and trends

Relevant Insights

Should You Disrupt Yourself to Accelerate Digital Transformation?

It has been interesting to watch Microsoft transition from a company that makes its money via licensing to one that...

Cybersecurity Myth Busted: Tools Are the Solution

When thinking about security, people often gravitate towards implementing various security tools, solutions, or products. If you bring up a...

Time to Reconsider MP-BGP EVPN for Your Datacenter Network?

VxLAN was defined in 2014 by RFC 7348 and has been used as a component in several SDN (software defined...
X