Simple-scroller NPM

simple-scroller

Example

Zero dependency interface for scrolling to react components

Install

npm install --save simple-scroller

Usage

Scrollable / useScroller

Registers a component one can later of refer from useScroller hook to scroll to it at later point programmatically useScroll provides interface for scrolling by name reference

import React, { useEffect } from 'react'

import { Scrollable, useScroller } from 'simple-scroller'

const Example = () => {
  const { animateScroll } = useScroller("test");
  useEffect(() => {
    animateScroll();
  });
  return (
    <Scrollable name="test" />
  )
}

ScrollToElement

Does the same as Scrollable, moreover it scrolls to element upon render

import React, from 'react'

import { ScrollToElement } from 'simple-scroller'

const Example = () => {
  return (
    <ScrollToElement name="test" />
  )
}

If for some reason , you need to scroll n px above element,
pass offset prop to Scrollable/ScrollToElement component
```jsx
import React, from 'react'

import { ScrollToElement } from 'simple-scroller'

const Example = () => {
  return (
    <ScrollToElement name="test" offset="40"/>
  )
}

You can prevent scrolling if necesarry by passing shouldScroll boolean property

import React, from 'react'

import { ScrollToElement } from 'simple-scroller'

const Example = () => {
  const [shouldScroll, setShouldScroll] = useState(false)
  const onClick = () => {
    setShouldScroll(!shouldScroll);
  }
  return (
    <Fragment>
       <button onClick={onClick}>Scroll</button>
       <ScrollToElement name="test" shouldScroll={shouldScroll} />
    </Fragment>
  )
}