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

Component that customizes the list and inserts shadow when scrolling exists
https://github.com/andrelmlins/react-shadow-scroll

library react scroll shadow

Last synced: 5 months ago
JSON representation

Component that customizes the list and inserts shadow when scrolling exists

• Host: GitHub
• URL: https://github.com/andrelmlins/react-shadow-scroll
• Owner: andrelmlins
• License: mit
• Created: 2019-05-07T02:24:45.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T02:26:37.000Z (over 2 years ago)
• Last Synced: 2024-06-11T18:06:11.980Z (10 months ago)
• Topics: library, react, scroll, shadow
• Language: JavaScript
• Homepage: https://react-shadow-scroll.netlify.com/
• Size: 2.25 MB
• Stars: 28
• Watchers: 3
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-shadow-scroll - Component that customizes the image and inserts shadow when scrolling exists. (UI Components / Custom Scrollbar)
• awesome-react - react-shadow-scroll - Component that customizes the list and inserts shadow when scrolling exist.  (UI Components / Custom Scrollbar)
• awesome-react-components - react-shadow-scroll - Component that customizes the image and inserts shadow when scrolling exists. (UI Components / Custom Scrollbar)
• awesome-react-components - react-shadow-scroll - Component that customizes the image and inserts shadow when scrolling exists. (UI Components / Custom Scrollbar)
• fucking-awesome-react-components - react-shadow-scroll - Component that customizes the image and inserts shadow when scrolling exists. (UI Components / Custom Scrollbar)
• awesome-react-components - react-shadow-scroll - Component that customizes the image and inserts shadow when scrolling exists. (UI Components / Custom Scrollbar)
• awesome-react-components - react-shadow-scroll - Component that customizes the image and inserts shadow when scrolling exists. (UI Components / Custom Scrollbar)

README

        
# React Shadow Scroll

[![npm version](https://badge.fury.io/js/react-shadow-scroll.svg)](https://www.npmjs.com/package/react-shadow-scroll) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/react-shadow-scroll/blob/master/LICENSE) • [![Node.js CI](https://github.com/andrelmlins/react-shadow-scroll/actions/workflows/nodejs.yml/badge.svg)](https://github.com/andrelmlins/react-shadow-scroll/actions/workflows/nodejs.yml) • [![Netlify Status](https://api.netlify.com/api/v1/badges/6061e313-a774-4951-b9da-3c11bc5040e8/deploy-status)](https://app.netlify.com/sites/react-shadow-scroll/deploys) • [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/andrelmlins/react-shadow-scroll.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/andrelmlins/react-shadow-scroll/context:javascript)

Component that customizes the list and inserts shadow when scrolling exists

## Installation

```

npm i react-shadow-scroll

// OR

yarn add react-shadow-scroll

```

## Demo [Link](https://react-shadow-scroll.netlify.com/)

Local demo:

```

git clone https://github.com/andrelmlins/react-shadow-scroll.git

cd react-shadow-scroll

npm install && npm run start

```

## Examples

```jsx

import React from 'react';

import { render } from 'react-dom';

import ReactShadowScroll from 'react-shadow-scroll';

const App = () => (

  

    


      
Teste

      
Teste

      
Teste

      
Teste

    

  

);


render(, document.getElementById('root'));

```

## Properties

Raw component props (before transform):

| Prop              | Default                                                                   | Type    | Description             |

| ----------------- | ------------------------------------------------------------------------- | ------- | ----------------------- |

| scrollColor       | #c5c5c5                                                                   | string  | Scroll color            |

| scrollColorHover  | #a6a6a6                                                                   | string  | Scroll color when hover |

| scrollWidth       | 5                                                                         | number  | Scroll Width            |

| scrollPadding     | 0                                                                         | number  | Left scroll padding     |

| isShadow          | true                                                                      | boolean | View shadow             |

| shadow            | '0 2px 4px rgba(0, 0, 0, 0.2) inset, 0 -2px 4px rgba(0, 0, 0, 0.2) inset' | string  | Shadow                  |

| styleSubcontainer | null                                                                      | object  | Style in Subcontainer   |

## NPM Statistics

Download stats for this NPM package

[![NPM](https://nodei.co/npm/react-shadow-scroll.png)](https://nodei.co/npm/react-shadow-scroll/)

## License

React Shadow Scroll is open source software [licensed as MIT](https://github.com/andrelmlins/react-shadow-scroll/blob/master/LICENSE).