34 lines
1.1 KiB
Markdown
34 lines
1.1 KiB
Markdown
|
# @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:
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
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:
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
ReactDOM.render(
|
||
|
|
<WindowProvider window={childWindow}>
|
||
|
|
<...>
|
||
|
|
</WindowProvider>,
|
||
|
|
childWindowElement
|
||
|
|
);
|
||
|
|
```
|