Package Exports

@fluentui/react-portal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fluentui/react-portal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@fluentui/react-portal

React Portal components for Fluent UI React

These are not production-ready components and should never be used in product. This space is useful for testing new components whose APIs might change before final release.

This package contains the Portal component, which allow consumers to render React portals with Fluent styling and RTL awareness.

Usage

Portal

Portal can be used as standalone with any part of a Fluent app. The component should be under a FluentProvider in the tree to make sure that proper theming and RTL handling is available.

By default Portal will render content to document body

<FluentProvider>
  <Portal>Content rendered by default to Fluent's document.body</Portal>
</FluentProvider>

The mount location of the portal can be customized

const node = document.getElementById('customNode');

<Portal mountNode={node}>Render to a custom node in DOM</Portal>;

Styling

Portal renders React children directly to the default/configured DOM node. Therefore styling should be applied to the children by users directly.