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

Pure CSS shadow to indicate more content in scrollable area
https://github.com/zzarcon/react-scroll-shadow

css height overflow pure-css react scroll scrollable scrollbar shadow

Last synced: 3 days ago
JSON representation

Pure CSS shadow to indicate more content in scrollable area

• Host: GitHub
• URL: https://github.com/zzarcon/react-scroll-shadow
• Owner: zzarcon
• License: mit
• Created: 2017-12-28T07:57:44.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-22T23:37:41.000Z (over 6 years ago)
• Last Synced: 2025-01-14T11:12:31.461Z (10 days ago)
• Topics: css, height, overflow, pure-css, react, scroll, scrollable, scrollbar, shadow
• Language: TypeScript
• Homepage: https://zzarcon.github.io/react-scroll-shadow
• Size: 18.6 MB
• Stars: 231
• Watchers: 4
• Forks: 10
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-scroll-shadow [![Build Status](https://travis-ci.org/zzarcon/react-scroll-shadow.svg?branch=master)](https://travis-ci.org/zzarcon/react-scroll-shadow)

> Pure CSS shadow to indicate more content in scrollable area



  

  





# Demo 🍿

[https://zzarcon.github.io/react-scroll-shadow](https://zzarcon.github.io/react-scroll-shadow)

# Install 🚀

```

$ yarn add react-scroll-shadow

```

# Usage ⛏

**Basic** 

```tsx

import ScrollShadow from 'react-scroll-shadow';

  Content

```

**Custom**

```tsx

import ScrollShadow from 'react-scroll-shadow';

  Content

```

# Api 📚

```ts

interface ShadowColors {

  inactive: string;

  active: string;

}

interface Props {

  height?: string;

  bottomShadowColors?: ShadowColors;

  topShadowColors?: ShadowColors;

  shadowSize?: number;

}

```

See [example/](https://github.com/zzarcon/react-scroll-shadow/tree/master/example) for full example.