react-fabric

react-fabric is a set of React components that wrap the Office UI Fabric

⚠️ DEPRECATED ⚠️

Use office-ui-fabric-react

Installation

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.

Usage

Before you start using react-fabric it is recommended to setup a basic Webpack workflow with babel-loader, css-loader and sass-loader. A minimal starter project is React Hot Boilerplate.

Dont forget to enable CSS modules support for the css-loader

{
    test: /\.css/,
    loader: 'style!css?modules'
}

Once Webpack is set up, you can just require react-fabric and use the components

import React from 'react';
import Button from 'react-fabric/lib/Button';

const SaveButton = ({ onClick }) => (
  <Button type="hero" glyph="save" onClick={onClick}>Save</Button>
);

export default SaveButton

The above code creates a custom SaveButton component based on the hero button component of fabric ui. Please note 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 font-face declarations from the office-ui-fabric package in a global stylesheet and requiring it in your root component.

// globals.scss
@import "~office-ui-fabric/src/sass/Fabric.Typography.Fonts.Output.scss";
@import "~office-ui-fabric/src/sass/Fabric.Icons.Font.Output.scss";

// Root.js
require('globals.scss');

const Root = () => {
  // ...
};

Alternatively, just require the fonts module from react-fabric

// Root.js
require('react-fabric/lib/fonts');

const Root = () => {
  // ...
};

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'

Tests

All components are unit tested. To run the tests, follow these steps:

$ npm install
$ npm test

License

This project is licensed under the terms of the MIT License