zzarcon / react-scroll-shadow

Pure CSS shadow to indicate more content in scrollable area

react-scroll-shadow

Pure CSS shadow to indicate more content in scrollable area

Demo 🍿

https://zzarcon.github.io/react-scroll-shadow

Install 🚀

$ yarn add react-scroll-shadow

Usage ⛏

Basic

import ScrollShadow from 'react-scroll-shadow';

<ScrollShadow>
  Content
</ScrollShadow>

Custom

import ScrollShadow from 'react-scroll-shadow';

<ScrollShadow
  bottomShadowColors={{
    active: 'red',
    inactive: 'white'
  }}
  topShadowColors={{
    active: 'blue',
    inactive: 'white'
  }}
  shadowSize={2}
>
  Content
</ScrollShadow>

Api 📚

interface ShadowColors {
  inactive: string;
  active: string;
}

interface Props {
  height?: string;
  bottomShadowColors?: ShadowColors;
  topShadowColors?: ShadowColors;
  shadowSize?: number;
}

See example/ for full example.