react-perfect-scrollbar-z v1.2.3

Description

• It is wrap the perfect-scrollbar for the element.

• Auto update scrollbar (resize, change data), you don't have to do anything.

• Support for scroll-y for only the body of the table. (Keep header)

Usage

npm install react-perfect-scrollbar-z

Import the module in the place you want to use:

import 'react-perfect-scrollbar-z/build/styles.css';

import Scrollbar from 'react-perfect-scrollbar-z'

Snippet

simple

    // tagName = 'div' wrapName='div'
    // something1 (..any, showHide, data2, data3)
    <Scrollbar height="100px" effectData={something1...}>
        { something1...  }
    </Scrollbar>

special tagName (tbody, ul, dl, ol)

    // const refScroll = useRef(null) // you handle scrollbars
    <Scrollbar
        tagName="tbody" // tbody, ul, dl, ol
        maxHeight="400px"
        className="list-group"
        effectData={listData}
        always
        // onScrollY={evt => console.log(evt)}
        // refScroll={refScroll}
    >
        { listData.map(item => <tr>...</tr>) }
    </Scrollbar>

// access scrollbar (your handler)
refScroll.current.element.scrollTop = 0  || refScroll.current.update()

props

Note

• tbody only scroll-y (no x). You should not use maxWidth, width (default by table).

• Update scrollTop, scrollLeft: using refScroll

• ul/ol/dl/tbody. This is a special. (multi childs), so you shouldn't update the border for tagName.

<Scrollbar style={{ border: "1px solid" }} tagName="tbody" ... /> => no
<parent style={{ border: "1px solid" }}> <Scrollbar tagName="tbody" ... /> </parent> => OK

• libTable

<Scrollbar libTable={true}><CustomTag></CustomTag></Scrollbar>

It will try to add the perfect scrollbar to the `tbody` of the `first` table found. (Checking...)

• you should use ul/dl/ol with basic

<Scrollbar effectData={abcd} .... > <ul> <for>...</for> </ul> <Scrollbar>

RUN

LIVE EXAMPLE

npm install

npm run dev
npm run start

License

MIT