react-shadow-scroll

Component that customizes the list and inserts shadow when scrolling exists

Programming language: JavaScript

License: MIT License

Tags: UI Components     Custom Scrollbar    

Latest version: v2.1.0

README

React Shadow Scroll

• • • •

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

Local demo:

git clone https://github.com/andrelmlins/react-shadow-scroll.git
cd react-shadow-scroll
npm install && npm run 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):

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

License

React Shadow Scroll is open source software licensed as MIT.