@nuagedelait/react-scrollspy v1.0.0

react-scrollspy

React scrollspy component

This component is under development

Roadmap :

Export dist

install

npm install @nuagedelait/react-scrollspy --save

use

You should compose the element you want to spy with the ScrollSpy. It renders and Fragment so it will not mess with your dom structure. If you compose several items, the first one will be the reference and will receive classes and data

Roadmap :

add data and classes to all child elements.

import ScrollSpy from '@nuagedelait/react-scrollspy';

const Component = (props) => {

  return(
    <ScrollSpy>

    ... Content to animate

    </scrollspy>

  )
}

result

The component add class inview to his reference if the element top/left corner enter the view.

The reference receive also a progress status from -1 to 1 (right to left or bottom to top) and associated classes :

Roadmap :

Handle only top/left corner or full object.

<img class="inview inviewY_b_20" delta={deltaX:0,deltaY:0.2}/>

Options

ex : <ScrollSpy offsetX={100} delayIn={200}/>