use-scroll-shadow
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

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();

Package Sidebar

Install

npm i use-scroll-shadow

Weekly Downloads

12

Version

1.0.5

License

MIT

Unpacked Size

10.4 kB

Total Files

11

Last publish

Collaborators

  • necolo