office-ui-fabric-react
Advanced tools
Reusable React components for building experiences for Office 365.
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 { DefaultButton } from 'office-ui-fabric-react/lib/Button';
const MyPage = () => <DefaultButton>I am a button</DefaultButton>;
ReactDOM.render(<MyPage />, document.body.firstChild);
If you need to render Fabric components on the server side in a node environment, there is a way to do this. The basic idea is that you need to tell the styles loader to pipe styles into a variable, which you can later use to inject into your page. Example:
import { configureLoadStyles } from '@microsoft/load-themed-styles';
// Store registered styles in a variable used later for injection.
let _allStyles = '';
// Push styles into variables for injecting later.
configureLoadStyles((styles: string) => {
_allStyles += styles;
});
import * as React from 'react';
import * as ReactDOMServer from 'react-dom/server';
import { Button } from 'office-ui-fabric-react/lib/Button';
let body = ReactDOMServer.renderToString(<Button>hello</Button>);
console.log(
`
<html>
<head>
<style>${_allStyles}</style>
</head>
<body>
${body}
</body>
</html>
`
);
Note: we are evaluating a more robust theming and style loading approach, which will allow a much more flexible server rendering approach, so this syntax may be simplified in the future.
To learn more about how to use the components in your application visit the Office UI Fabric website. If you are looking to create a new fabric component, or contribute to the project, the developer documentation can be found in our Wiki.
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.
Fabric React supports many commonly used browsers. See the browser support doc for more information.
We're excited to share our development of this project with folks outside of the company, but please keep in mind that we're moving towards a v1 state which requires that we stay focused on reaching that goal. With this in mind, take a look at our contribution guidelines for more info on how we plan to look at issues, how to structure your commit messages, and more.
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.
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.
FAQs
Reusable React components for building experiences for Microsoft 365.
The npm package office-ui-fabric-react receives a total of 26,099 weekly downloads. As such, office-ui-fabric-react popularity was classified as popular.
We found that office-ui-fabric-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.