react-perfect-scrollbar2 v1.0.0

Usage

Install the package npm install react-perfect-scrollbar2

Import the module in the place you want to use:

    import Scrollbar from 'react-perfect-scrollbar2'

Wrap you content in this component:

Snippet

    <Scrollbar
        tagName="ul"
        maxHeight="400px"
        className="list-group"
        effectData={listData}
        always
    >
        { listData.map(item => <li>...</li>) }
    </Scrollbar>

    // only scroll body
    <table>
        <thead>...</thead>
        <Scrollbar
            tagName="tbody"
            effectData={[listData, isShowHide, ...somthingelse]}
            height="500px"
        >
            { listData.map(item => <tr>...</tr>) }
        </Scrollbar>
    </table>

    // more...
    <Scrollbar effectData={something} height="500px">
        { something }
    </Scrollbar>

    <Scrollbar
        onScrollY={container => console.log(`Scroll to y: ${container.scrollTop}.`)}
    >
        { something }
    </Scrollbar>

Props

The following props are accepted:

options

The optional parameters used to initialize perfect-scrollbar. For more info, please refer to https://github.com/utatti/perfect-scrollbar#options

tagName

The container html name. Default to "div". Only string is allowed. Should be: tbody, ul/dl/ol, div/section...

effectData

Listen auto update if data has changed (effectData). It is (Object, Array, String)

always

true: Always show scrollbar if data is overflow. false: Show scrollbar only mousehover. (default)

maxHeight

Max-height of scrollbar.

height

Height of scrollbar. should only use: height or maxHeight.

className

The className added to container.

style

The style added to container.

onScrollY

Invoked when the y-axis is scrolled in either direction.

onScrollX

Invoked when the x-axis is scrolled in either direction.

onScrollUp

Invoked when scrolling upwards.

onScrollDown

Invoked when scrolling downwards.

onScrollLeft

Invoked when scrolling to the left.

onScrollRight

Invoked when scrolling to the right.

onYReachStart

Invoked when scrolling reaches the start of the y-axis.

onYReachEnd

Invoked when scrolling reaches the end of the y-axis (useful for infinite scroll).

onXReachStart

Invoked when scrolling reaches the start of the x-axis.

onXReachEnd

Invoked when scrolling reaches the end of the x-axis.

All the callback 'onXXXX' can accept a parameter: the ref to the scrollbar container. You can get the current scrollTop and scrollLeft.

React.HTMLAttributes

Any attributes defined in React.HTMLAttributes can be used for the component.

Methods

No. If you want to update scrollTop, scrollLeft, using document.querySelector('').scrollTop = xxx // Todo: think some ideas.

Example

A working example can be found in the example directory.

`npm install`

`npm run watch-sample`

License

MIT