scroll

Component that customizes the image and inserts shadow when scrolling exists

Dec 18, 2019
Component that customizes the image and inserts shadow when scrolling exists

React Shadow Scroll

Component that customizes the image and inserts shadow when scrolling exists.

View demo View Github

react-shadow-scrollx

Installation

npm i react-shadow-scroll // OR yarn add react-shadow-scroll

Local demo:

git clone https://github.com/andrelmlins/react-shadow-scroll.git cd react-shadow-scroll yarn install && yarn start

Examples

import React from 'react'; import { render } from 'react-dom'; import ReactShadowScroll from 'react-shadow-scroll'; const App = () => ( <ReactShadowScroll> <ul> <li>Teste</li> <li>Teste</li> <li>Teste</li> <li>Teste</li> </ul> </ReactShadowScroll> ); render(<App />, document.getElementById('root'));

Properties

Raw component props (before transform):

PropDefaultTypeDescription
scrollColor#c5c5c5stringScroll color
scrollColorHover#a6a6a6stringScroll color when hover
scrollWidth5numberScroll Width
scrollPadding0numberLeft scroll padding
isShadowtruebooleanView shadow
shadow'0 2px 4px rgba(0, 0, 0, 0.2) inset, 0 -2px 4px rgba(0, 0, 0, 0.2) inset'stringShadow
stylenullobjectStyle in Container
styleSubcontainernullobjectStyle in Subcontainer

NPM Statistics

Download stats for this NPM package

NPM

GitHub

Recommended