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

`typescript
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 (



);
}
`

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:

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