Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 13 days 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 (over 5 years ago)
Default Branch: master
Last Pushed: 2022-12-11T02:26:37.000Z (almost 2 years ago)
Last Synced: 2024-06-11T18:06:11.980Z (5 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. ![](https://img.shields.io/github/stars/andrelmlins/react-shadow-scroll.svg?style=social&label=Star) (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)

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).