use-scroll-shadow

A react hook for adding top and bottom shadow to scrollable content.

Demo

why use-scroll-shadow

You can use PureCSS for simple scrollable content.
But if the content children has solid background colors, that pure css way won't work.

Features

• Add top shadow when content scrolled
• Hide bottom shadow when content hit bottom
• Observe scroll element height, if it's not scrollable, will hide shadows

Install

npm i use-scroll-shadow

How to use

import React from 'react';
import { useScrollShadow } from 'use-scroll-shadow';
import 'use-scroll-shadow/lib/index.css'; // don't forget import css

// example
function App() {
  const { elementRef } = useScrollShadow();

  return (
    <div>
      <div ref={elementRef} style={{ overflowY: 'auto', maxHeight: '100vh' }}>
        {/* Put your content here */}
      </div>
    </div>
  );
}

By default, it will find the element's parent element as the wrapper element. But in some special cases, you may want to define it to another element:

// get and define the wrapperRef
const { wrapperRef, elementRef } = useScrollShadow();