1 | # [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)
|
2 |
|
3 | **The React-based front-end framework for building web experiences.**
|
4 |
|
5 | [![npm version](https://badge.fury.io/js/%40fluentui%2Freact.svg)](https://badge.fury.io/js/%40fluentui%2Freact) [![Build Status](https://img.shields.io/azure-devops/build/uifabric/fabricpublic/164/master?style=flat-square)](https://dev.azure.com/uifabric/fabricpublic/_build?definitionId=164)
|
6 |
|
7 | Fluent UI React (formerly Office UI Fabric React) is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.
|
8 |
|
9 | **What's changed in version 8? See the [release notes](https://github.com/microsoft/fluentui/wiki/Version-8-release-notes).**
|
10 |
|
11 | _(If you're looking for [Fluent UI Northstar](https://aka.ms/fluent-ui), formerly Stardust, use `@fluentui/react-northstar` instead.)_
|
12 |
|
13 | ## Component documentation
|
14 |
|
15 | See the [main Fluent UI website](https://developer.microsoft.com/en-us/fluentui) for the list of available components, API and usage documentation, and styling information.
|
16 |
|
17 | ## Who uses Fluent UI React?
|
18 |
|
19 | ![image](https://user-images.githubusercontent.com/785361/50458071-45b58d00-0915-11e9-90c0-ad8789c99db5.png)
|
20 |
|
21 | \+ 45 additional Microsoft sites and products
|
22 |
|
23 | ## Contents
|
24 |
|
25 | - [Using Fluent UI React](#using-fluent-ui-react)
|
26 | - [Integrating in your project](#integrating-in-your-project)
|
27 | - [Version policy](#version-policy)
|
28 | - [Browser support](#browser-support)
|
29 | - [Right-to-left support](#right-to-left-support)
|
30 | - [Server-side rendering](#server-side-rendering)
|
31 | - [Advanced usage](#advanced-usage)
|
32 | - [Contribute to Fluent UI React](#contribute-to-fluent-ui-react)
|
33 | - [Licenses](#licenses)
|
34 | - [Changelog](#changelog)
|
35 | - [More information](#more-information)
|
36 |
|
37 | ## Using Fluent UI React
|
38 |
|
39 | ### Creating a new app
|
40 |
|
41 | To create a simple React app using [Create React App](https://create-react-app.dev), [install Node.js](https://nodejs.org), then run:
|
42 |
|
43 | ```sh
|
44 | npx create-react-app my-app --template @fluentui/cra-template
|
45 | cd my-app
|
46 | npm start
|
47 | ```
|
48 |
|
49 | ### Integrating in an existing project
|
50 |
|
51 | ```sh
|
52 | npm i @fluentui/react
|
53 | ```
|
54 |
|
55 | This will add the package as a dependency in your `package.json` file and download it under `node_modules/@fluentui/react`.
|
56 |
|
57 | The library includes ES module entry points under the `lib` folder (use `lib-amd` if you need AMD, or `lib-commonjs` if you need commonjs).
|
58 |
|
59 | ### Version policy
|
60 |
|
61 | Fluent UI React adheres to [semantic versioning](http://www.semver.org/). However, we only consider constructs directly importable at the package level or from files at the root (e.g. `@fluentui/react/lib/Utilities` or `@fluentui/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.
|
62 |
|
63 | ### Browser support
|
64 |
|
65 | Fluent UI React supports all evergreen browsers, with IE 11 as the min-bar version of Internet Explorer. See the [browser support doc](https://github.com/microsoft/fluentui/wiki/Browser-Support) for more information.
|
66 |
|
67 | ### Right-to-left support
|
68 |
|
69 | 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:
|
70 |
|
71 | ```tsx
|
72 | import { setRTL } from '@fluentui/react/lib/Utilities';
|
73 |
|
74 | setRTL(true);
|
75 | ```
|
76 |
|
77 | ### Server-side rendering
|
78 |
|
79 | Fluent UI React 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](https://github.com/microsoft/fluentui/wiki/Server-side-rendering-and-browserless-testing) for examples of how to handle this.
|
80 |
|
81 | ### Advanced usage
|
82 |
|
83 | For info about advanced usage including module- vs. path-based imports, using an AMD bundler like RequireJS, and deployment features, see our [advanced documentation](https://github.com/microsoft/fluentui/wiki/Advanced-Usage).
|
84 |
|
85 | ## Contribute to Fluent UI React
|
86 |
|
87 | Please take a look at our [contribution guidelines](https://github.com/microsoft/fluentui/wiki/Contributing) to learn how to make changes, build the repo and submit your contributions to Fluent UI.
|
88 |
|
89 | ## Licenses
|
90 |
|
91 | All files on the Fluent UI React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.
|
92 |
|
93 | Usage of the fonts and icons referenced in Fluent UI React is subject to the terms of the [assets license agreement](https://aka.ms/fluentui-assets-license).
|
94 |
|
95 | ## Changelog
|
96 |
|
97 | We use [GitHub Releases](https://github.com/blog/1547-release-your-software) to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes on the [releases](https://github.com/microsoft/fluentui/releases) page.
|
98 |
|
99 | ## More information
|
100 |
|
101 | Please see the [wiki](https://github.com/microsoft/fluentui/wiki).
|
102 |
|
103 | ---
|
104 |
|
105 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
|