Skip to content
React components for building Microsoft web experiences.
Branch: master
Clone or download
Vitalius1 and msft-github-bot Tooltip: remove BaseComponent and fix 2 issues (#9845)
* Reafactor out BaseComponent

* introduce dismiss timer and move delay logic

* Remove all delay traces from Tooltip

* Remove console.log and fix tests

* Remove unused var

* Remove unused imports and update API

* Change files
Latest commit 35e8857 Jul 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Remove me as codeowner (#9764) Jul 10, 2019
.vscode TextField: proper controlled/uncontrolled behavior + deprecated prop … Jun 11, 2019
apps update vr test packages (#9853) Jul 18, 2019
change Tooltip: remove BaseComponent and fix 2 issues (#9845) Jul 18, 2019
common update vr test packages (#9853) Jul 18, 2019
ghdocs Added 'made with fabric' to readme (#5018) May 30, 2018
packages Tooltip: remove BaseComponent and fix 2 issues (#9845) Jul 18, 2019
scripts updateReleaseNotes updates and other build things (#9783) Jul 17, 2019
typings Fix Fabric 7 package and dependency versions (#9433) Jun 12, 2019
.appveyor.yml add code of generating artifacts (#5519) Jul 19, 2018
.gitattributes Switch to pnpm (work in progress) (#7186) Nov 30, 2018
.gitignore Site deploy: this is the one for for master branch (#8916) May 2, 2019
.npmrc Update .npmrc Feb 17, 2018
.prettierignore Run prettier on all relevant files (#8644) Apr 16, 2019
6.0_RELEASE_NOTES.md Fix moduleNameMapper configuration (#5593) Jul 17, 2018
LICENSE Update assets license (#9084) May 14, 2019
README.md README update announcing Fabric 7 Jun 12, 2019
azure-pipelines.release.yml temporary workaround and disables the generate-version step (#9836) Jul 17, 2019
azure-pipelines.yml Add debug arg to screener command Jul 17, 2019
package.json Adds Just build cache (#9794) Jul 13, 2019
prettier.config.js Code formatting configs for tslint and prettier are moving to publish… Oct 6, 2018
rush.json New MDL2-theme package (#9555) Jun 25, 2019

README.md

Office UI Fabric React

The React-based front-end framework for building experiences for Office and Office 365.

Fabric 7 Summary, breaking changes, and more details available in the wiki.

npm version

Build Status

Fabric React is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Office Design Language.

Who uses UI Fabric?

image

+ 45 additional Microsoft sites and products

For more information...

Please see the wiki.

Contents

Using Fabric React

Here is a step-by-step tutorial on how to build a simple React app with office-ui-fabric-react components.

How to integrate 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 bundle only 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 package as a dependency in your package.json file and download it under node_modules/office-ui-fabric-react.

The library includes ES2015 module entry points under the lib folder (use lib-amd if you need AMD, or lib-commonjs if you need commonjs). To use a control, import it and then 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);

Version policy

Fabric React adheres to semantic versioning. However, we only consider constructs directly importable at the package level or from files at the root (e.g. office-ui-fabric-react/lib/Utilities or office-ui-fabric-react/lib-amd/Styling) to be part of our API surface. Everything else is considered package-internal and may be subject to changes, moves, renames, etc.

Browser support

Fabric React supports all evergreen browsers, with IE 11 as the min-bar version of Internet Explorer. See the browser support doc for more information.

Right-to-left support

All components can render in LTR or RTL, depending on the dir attribute set on the html element (dir="rtl" will flip the direction of everything). You can also use the setRTL API if you don't have control over the html element's rendering. Example:

import { setRTL } from 'office-ui-fabric-react/lib/Utilities';

setRTL(true);

Server-side rendering

Fabric components can be rendered in a server-side Node environment (or used in tests which run in an SSR-like environment), but it requires customizing how styles and SCSS files are loaded. See the server-side rendering documentation for examples of how to handle this.

Advanced usage

For info about advanced usage including module- vs. path-based imports, using an AMD bundler like RequireJS, and deployment features, see our advanced documentation.

Contribute to Fabric React

Please take a look at our contribution guidelines for more info. Also read Contribute bug fixes and Contribute new component.

Building the repo

Before you get started, make sure you have read the Git branch setup instructions

To view the documentation including examples, contracts, component status, and to add functionality or fix issues locally, you can:

  1. git clone https://github.com/OfficeDev/office-ui-fabric-react.git
  2. cd office-ui-fabric-react
  3. npm install
  4. npm 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, run npm run build from the root.

To build individual packages within the packages/* or apps/* folders, cd to the relevant folder and run npm run build. 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.)

Testing

For info about testing, see our testing documentation.

Advanced building tips

The repo contains many packages, each which may have dependencies on each other. You can use Rush to build projects in the correct order, if you have it globally installed.

npm install -g @microsoft/rush

To 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). If you don't have Rush globally installed, you can use the command npm run buildfast, which abstracts rush build.

To build up to a specific project, use the --to <package> argument. For example, to build up to office-ui-fabric-react, run:

rush build --to office-ui-fabric-react

Licenses

All 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.

Changelog

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.

You can’t perform that action at this time.