Skip to content

Latest commit

 

History

History
48 lines (37 loc) · 1.59 KB

ViewportProvider.md

File metadata and controls

48 lines (37 loc) · 1.59 KB

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