react-viewport-provider
v1.0.6
Published
Provide viewport dimensions to children components.
Downloads
16
Readme
React Viewport Provider
Provides viewport dimensions to children.
ViewportProvider
measures viewport dimensions and updates them in a performant manner. This means:
- Viewport is only measured once, and all components are updated with the new values simultaneously.
- Measurement is debounced for 200ms (by default)
Usage
ViewportProvider
uses the children-as-function pattern:
import ViewportProvider from 'react-viewport-provider';
export default () => (
<ViewportProvider>
{({ viewportWidth, viewportHeight, isViewportResizing }) => (
<div>
{`Viewport is ${viewportWidth}px x ${viewportHeight}px!`}
</div>
)}
</ViewportProvider>
);
Children props
viewportWidth
,viewportHeight
:number | null
Viewport dimensions, measured in pixels. When running server-side (where no viewport exists), both values arenull
.isViewportResizing
true
when a user begins resizing the viewport,false
when they've stopped resizing for longer than thedebounceDuration
(default 200ms).