The Wayback Machine - https://web.archive.org/web/20200612115710/https://github.com/zzarcon/react-scroll-shadow
Skip to content
Pure CSS shadow to indicate more content in scrollable area
TypeScript HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
custom-typings
example
src
.gitignore
.nvmrc
.travis.yml
LICENSE
README.md
demo.gif
package.json
tsconfig.json
yarn.lock

README.md

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.

You can’t perform that action at this time.