react-ps-scrollview v1.0.0

react-ps-scrollview

Component, ReactJS Scrollbar (JS-hooks)

react-ps-scrollview: This is a wrapper to allow use perfect-scrollbar in React.

Usage

Install the package npm install react-ps-scrollview

Import the module in the place you want to use:

    import ScrollView from 'react-ps-scrollview'

Wrap you content in this component:

    <ScrollView>
        ... SCROLLBAR CONTENT HERE ...
    </ScrollView>

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

This prop previously was called "option", but has since been renamed.

tagName

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

effectData

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

always

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

maxHeight

Max-height of scrollview.

height

Height of scrollview. 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 from it:

    <ScrollView
        onScrollY={container => console.log(`Scroll to y: ${container.scrollTop}.`)}
    >
        ... SCROLLBAR CONTENT HERE ...
    </ScrollView>

React.HTMLAttributes

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

Methods

No. If you want to update scrollTop, scrollLep, using selector. // Todo: think some ideas.

Snippet

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

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

<ScrollBar effectData={something} height="500px">
    { something }
</ScrollBar>

Example

A working example can be found in the example directory.

npm install npm run watch-sample

License

MIT