react-fabric is a set of React components that wrap the Office UI Fabric
react-fabric can be installed as an npm package
$ npm install --save react-fabric
Please note that you also have to install all missing peer depencies.
Before you start using
react-fabric it is recommended to setup a basic Webpack workflow with
and sass-loader. A minimal starter project is
React Hot Boilerplate.
Once Webpack is set up, yu can just require
react-fabric and use the components
import React from 'react';import Button from 'react-fabric/lib/Button';const SaveButton = onClick<Button ="hero" ="save" =>Save</Button>;
The above code creates a custom
SaveButton component based on the hero button component of fabric ui. Please not
that all the required SASS for the button component is automatically required by the module.
Fonts & Icons
react-fabric does not load any of the required font files automatically. The recommended way
is to get the fonts from the Office CDN by simply importing the fontface declaration
office-ui-fabric package in a global stylesheet and requiring it in your layout component.
// Layout.jsconst Layout =// ...
Example / Docs
The docs project included in this repository doubles as the example project. To run the docs project, follow these steps:
$ npm install$ cd docs/$ npm install$ npm start$ open 'http://localhost:3030'
All components are unit tested. To run the tests, follow these steps:
$ npm install$ npm test
This project is licensed under the terms of the MIT License