React Shadowed Double Scrollbar

A simple react component for adding scrollbars on both top and bottom of content with customizable shadows.

Standalone fork of umchee/react-double-scrollbar. Fully rewritten in functional style, with the addition of shadows to make it clearer to users if an element can be scrolled (particularly useful for mobile browsers where scrollbars are hidden by default).

Storybook demo

NPM package

Usage

Setup

npm install react-shadowed-double-scrollbars

Properties

| Property | Type | Required? | Description | Valid values | Default value | | -------- | ---- | --------- | ----------- | ------------ | ------------- | | backgroundColor | String | No | Custom background color of scrollbox | Any valid css color string (color name or hex code) | Depends on value of shadowVariant: off: no backgroundlight: dark background (#111111)dark: light background (#ffffff) | | shadowVariant | String | No | Type of shadow to display on the edge of the scrollable content. | light, dark, or off | dark |

Examples

import DoubleScrollbar from 'react-shadowed-double-scrollbar';

<DoubleScrollbar>
    <div>Your content or other components here!</div>
</DoubleScrollbar>

For additional examples and live demos, see Storybook.