Nondeterministic Programming Methodology

    react-provide-scroll-position

    1.0.2 • Public • Published

    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;

    Install

    npm i react-provide-scroll-position

    DownloadsWeekly Downloads

    198

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    827 kB

    Total Files

    22

    Last publish

    Collaborators

    • dlin-me