react-provide-scroll-position

A simple higher order function to provide scroll position to a component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-provide-scroll-position
711.0.26 years ago6 years agoMinified + gzip package size for react-provide-scroll-position in KB

Readme

react-provide-scroll-position
A simple higher order function to provide scroll position to a component:
  1. It monitor scroll events;
  2. provide scrollTop and scrollLeft as props to the wrapped components;
  3. If no target DOM element selector is given, it reports scroll position of the browser window;
Example
import React from 'react';
import ReactDom from 'react-dom';
import provideScrollPosition from '../../src/provideScrollPosition';

const ComponentA = ({ scrollTop, scrollLeft }) => (<div className='form-group'>
  <h4>window scroll position</h4>
  <label className="col-form-label">Scroll Top</label>
  <div>
    <input className="form-control" type="text" value={scrollTop} readOnly="readOnly" />
  </div>
  <label className="col-form-label">Scroll Left</label>
  <div>
    <input className="form-control" type="text" value={scrollLeft} readOnly="readOnly" />
  </div>
</div>);

const ComponentB = ({ scrollTop, scrollLeft }) => (<div className='form-group'>
  <h4>div scroll position</h4>
  <label className="col-form-label">Scroll Top</label>
  <div>
    <input className="form-control" type="text" value={scrollTop} readOnly="readOnly" />
  </div>
  <label className="col-form-label">Scroll Left</label>
  <div>
    <input className="form-control" type="text" value={scrollLeft} readOnly="readOnly" />
  </div>
</div>);

export const ComponentWithWindowScrollPosition = provideScrollPosition(ComponentA);
export const ComponentWithDivScrollPosition = provideScrollPosition(ComponentB, '.exampleDiv');


ReactDom.render(
  <div className="spacer">
    <div className="showcase">
      <ComponentWithWindowScrollPosition />
      <ComponentWithDivScrollPosition />
    </div>
  </div>,
  document.querySelector('#root')
);

Live demo: demo/dist/index.html
How it works
  1. API: provideScrollPosition(YourComponent, [selectors]);
  2. selectors is an optional string that pass to document.querySelector call;
  3. if selectors is not given, browser window scroll position is used as props;