Advanced Usage
We highly recommend using Webpack 4+. If you use Webpack 4 or Rollup.js, you can take advantage of tree-shaking to create smaller bundles. This allows you to imports the parts you need in a natural way:
import { Button } from '@fluentui/react'; // or office-ui-fabric-react in earlier versions
This import will include the Button, plus the dependent modules. It should not include any modules that are unrelated.
If you are using a non-tree-shaking bundler, you may accrue larger bundle sizes by importing from the package entry point @fluentui/react
(or office-ui-fabric-react
in earlier versions). By default bundlers will include every module referenced from that entry point, even if you don't use them.
To address this friction, we also offer "top level imports" which help scope the graph to only the component and its dependencies.
import { Button } from '@fluentui/react/lib/Button';
import { Dropdown } from '@fluentui/react/lib/Dropdown';
import { List } from '@fluentui/react/lib/List';
For a full list of top level imports, see the source here:
https://github.com/microsoft/fluentui/tree/master/packages/@fluentui/react/src
If your project relies on AMD modules, they are dropped in the lib-amd folder. You will need to set up your bundler to handle the imports correctly. This may require you to symlink or copy the folder into your pre-bundle location.
- FAQ - Fabric and Stardust to Fluent UI
-
@fluentui/react
Version 9 -
@fluentui/react
Version 8 - Contributing to the
7.0
branch - How to apply themes (version 7/8)
- Planning and development process (for work by the core team)
- Conducting meetings Style guide
- Keeping up with review requests
- RFC review process
- Setup (configuring your environment)
- Fluent UI React version 7/8
- CLA
- Overview
- Repo structure
- Development process
- Contributing to previous versions
- API Extractor
- Build command changes made in early 2020
- Component implementation guide
- Creating a component
- Implementation Best Practices
- Theming
- Documenting
- Styling (old approach)
- Overview
- Testing with Jest
- E2E testing (Cypress)
- Visual testing (Screener)
- Accessibility review checklist