@factor10x/fluentui-react-window-provider
v2.2.1-shadow.3
Published
Utilities for providing and consuming the window/document objects even across portal/iframe/child-window boundaries.
Downloads
4
Readme
@fluentui/react-window-provider
A set of utilities for providing and consuming the window
and document
references in a contextual scope.
Why is this needed?
When rendering on the main browser window, many components need access to window
or document
for applying styling, listening for events, or measuring things. However it is possible to render to child windows and elements hosted in iframe
elements.
In these cases, the target element is hosted in a different context, and thus have a different window
reference. To aid in providing components with the correct instances of window
or document
, React context can be used to provide the tree of React components with the correct instance.
Usage
To consume the window or document object, call useWindow
or useDocument
respectively:
const Foo = () => {
const win = useWindow();
const doc = useDocument();
return </>
}
To provide a new window other than the default, wrap your app in the WindowProvider
to override the defaults contextually:
ReactDOM.render(
<WindowProvider window={childWindow}>
<...>
</WindowProvider>,
childWindowElement
);