Awesome Open Source
Awesome Open Source

react-scroll-shadow Build Status

Pure CSS shadow to indicate more content in scrollable area

demo

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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,619)Β 
css (7,395)Β 
react (5,463)Β 
scroll (109)Β 
shadow (36)Β 
scrollbar (33)Β