ViewportProvider.md

ViewportProvider

The ViewportProvider is the heart because it collects and delegates global viewport information to connected components.

All other components needs to be a child of the ViewportProvider to receive events.

In case you are building libraries, don't worry about having more than one ViewportProvider within the tree. The library will detect other ViewportProvider and make sure that only on provider will collect and send out events.

API

Property	Type	Required?	Description
experimentalSchedulerEnabled	boolean		If set enables the experimental scheduler which allows to make use of the priority props on connected components to drop frames if necessary for a smooth user experience.
children	ReactNode	✓	Any react node that should be rendered. Nested in the tree can be components that connect to viewport updates

Example

import * as React from 'react';
import {
  ViewportProvider,
  connectViewport,
} from 'react-viewport-utils';

const Component = ({ scroll, dimensions }) => (
  <>
    <div>Dimension (inner)width: ${dimensions.width}</div>
    <div>Dimension (inner)height: ${dimensions.height}</div>
    <div>Scroll X: {scroll.x}</div>
    <div>Scroll Y: {scroll.y}</div>
  </>
);
const ConnectedComponent = connectViewport()(Component);

render(
  <ViewportProvider>
    <div>
      <ConnectedComponent />
    </div>
  </ViewportProvider>,
  document.querySelector('main')
);

Related docs

• Observe the Viewport
• Scheduler