react-shadowed-double-scrollbar

    1.0.5 • Public • Published

    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 background
    • light: 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.

    Install

    npm i react-shadowed-double-scrollbar

    DownloadsWeekly Downloads

    212

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    254 kB

    Total Files

    7

    Last publish

    Collaborators

    • chaiinchomp