react-perfect-scrollbar-z
TypeScript icon, indicating that this package has built-in type declarations

1.2.3 • Public • Published

react-perfect-scrollbar-z


LIVE EXAMPLE

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

props type description
options Object perfect-scrollbar/options
tagName String Container scrollbar. Default div
effectData String, Array, Object,..... Automatically update the scrollbar if the effectData has changed.
always boolean Always show scrollbar if data is overflow (true). Default false
maxHeight px, %, vh max-height of scrollbar
height px, %, vh height of scrollbar
maxWidth px, %, vw max-width of scrollbar
width px, %, vw width of scrollbar
className String Your css-class
style Object Your css-style
libTable Boolean When you update for 3th-party table. Default false
wrapName String Wrap all element scroll (div).When tagName is not in [tbody, ul, ol, dl.]
wheelStop Boolean wheelPropagation (quick in options). Default: true
refScroll useRef If you want to use scrollbars (ps scrollbar)
--- --- ---
onScrollY Function y-axis is scrolled in either direction.
onScrollX Function x-axis is scrolled in either direction.
onScrollUp Function scrolling upwards.
onScrollDown Function scrolling downwards.
onScrollLeft Function scrolling to the left.
onScrollRight Function scrolling to the right.
onYReachStart Function scrolling reaches the start of the y-axis.
onYReachEnd Function scrolling reaches the end of the y-axis (useful for infinite scroll).
onXReachStart Function scrolling reaches the start of the x-axis.
onXReachEnd Function scrolling reaches the end of the x-axis (useful for infinite scroll).

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

Package Sidebar

Install

npm i react-perfect-scrollbar-z

Weekly Downloads

171

Version

1.2.3

License

MIT

Unpacked Size

26.4 kB

Total Files

10

Last publish

Collaborators

  • delpikye