Home
Fabric React is a responsive, mobile-first collection of robust components designed to make it quick and simple for you to create web experiences using the Office Design Language.
Here is a step by step tutorial on how to build a simple React app with an Office UI Fabric React component.
Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as Webpack which can resolve NPM package imports in your code and can bundle the specific things you import.
Within an npm project, you should install the package and save it as a dependency:
npm install --save office-ui-fabric-react
This will add the fabric-react project as a dependency in your package.json file, and will drop the project under node_modules/office-ui-fabric-react.
The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
ReactDOM.render(
<PrimaryButton>
I am a button.
</PrimaryButton>,
document.body.firstChild
);Fabric React supports many commonly used browsers. See the browser support doc for more information.
Please take a look at our contribution guidelines for more info. Also read Contribute Bug fixes and Contribute New component.
Before you get started, make sure you have read the Git branch setup instrucions
To view the documentation including examples, contracts, component status, and to add functionality or fix issues locally, you can:
git clone https://github.com/OfficeDev/office-ui-fabric-react.gitnpm installnpm start
This will start a demo page from the office-ui-fabric-react package folder, which will open a web browser with the example page. You can make changes to the code which will automatically build and refresh the page using live-reload.
To build and run tests for all packages in the repo, you can run npm run build from the root.
To build individual packages within the packages/*/ folders, you can use npm run build in each individually. Note that because the packages are symlinked together, you must manage building dependencies in the right order, or use the rush tool to build to the specific package you want. (See advanced tips below.)
For testing see our testing documentation.
For advanced usage including info about module vs. path-based imports, using an AMD bundler like Require, and deployment features, see our advanced documentation.
The repo contains many packages, each which may have dependencies on each other. You can use the rush tool to build projects in the correct order, if you have it globally installed.
npm install -g @microsoft/rushTo use rush to build, you can run rush build, which will incrementally build the entire repo (only build what has changed since the last build.)
To can also build up to a specific project using the --to <package> argument. For example, to build up to office-ui-fabric-react, you can run:
rush build --to office-ui-fabric-reactAll files on the Office UI Fabric React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.
Usage of the fonts and icons referenced in Office UI Fabric is subject to the terms of the assets license agreement.
We use GitHub Releases to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes on the releases page.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
If you are getting stale[bot] messages and/or want to understand how we manage issues, please search for 'issue Triage' and/or 'stale[bot]' in the FAQ.