react-scroll-on-edges

Ability to Scroll when the mouse is near the edges

useScrollOnEdges

useScrollOnEdges is a react custom hook which uses scrollTo for scrolling X and Y. requestAnimationFrame to animate the scrolling.

Returns back the prop getter, which can be spread on a Html element for which we want the scrolling animation to happen.

Install

npm install --save react-scroll-on-edges

Usage (Basic)

import React from 'react'
 
import useScrollOnEdges from 'react-scroll-on-edges'
 
function Example() {
 
  const getEdgeScrollingProps = useScrollOnEdges()
 
  
    // Container div
    return <div {...getEdgeScrollingProps()} >
              Content...
          </div>
  
}
 
export default Example

(Optional) Props and usage with props

useScrollOnEdges hook can be called with the parameter as an object with three optional props

{
 canAnimate: boolean | true (default),
 scrollSpeed: number | 12 (default),
 edgeSize: number | 30 (default)
}

canAnimate - boolean - Tell the hook - Whether to scroll or not thorugh programmatically (default is true)
scrollSpeed - number - speed of the scroll (default is 12)
edgeSize - number - Tell the hook - the distance from edges when mouse has to start scrolling (default is 30)

Usage:

const edgeScroll = useScrollOnEdges({
    canAnimate: true,
    scrollSpeed: 15,
    edgeSize: 35
 })
 
 // JSX
 // edgeScroll is a prop getter, more info below
  return (
    <div {...edgeScroll()} >
      content...
    </div>
  )

More info on prop getters

Demo

Basic demo - Move the mouse near edges to scroll the container

More realistic example using React-table - Start selecting the cells and move near edges to scroll the container and select more cells