react-perfect-scrollbar-z

LIVE EXAMPLE
--- [![NPM](https://img.shields.io/npm/v/react-perfect-scrollbar-z.svg)](https://www.npmjs.com/package/react-perfect-scrollbar-z) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![Downloads](https://img.shields.io/npm/dt/react-perfect-scrollbar-z.svg) --- #### Description + It is wrap the [perfect-scrollbar](https://github.com/mdbootstrap/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 ```js npm install react-perfect-scrollbar-z ``` Import the module in the place you want to use: ```js import 'react-perfect-scrollbar-z/build/styles.css'; import Scroll from 'react-perfect-scrollbar-z'; // dynamically tagName // special import { Scrollbar, // wrapper div/section ScrollbarTBody, ScrollbarDataList, } from 'react-perfect-scrollbar-z'; // wrap default ```
#### Snippet ##### simple ```js import Scroll as Scrollbar from 'react-perfect-scrollbar-z'; // // const refScroll = useRef(null) // you handle scrollbar // something1 (..any, showHide, data2, data3) { something1... } console.log(evt)} // refScroll={refScroll} > { listData.map(item => ...) } ```

##### data-list (ul/ol/dl) ```js {listTodo.map((item, index) => { return (
  • {index + 1} - {item.title}   
    • ); })}     ```
    ##### tbody ```js const [listTodo, setListTodo] = useState([]); {listTodo.map((item, index) => { return ( ); })}
    Name Action
    {index + 1} - {item.title}
    ```
    ##### injectTable (3th-party table) ```js
    find first table append perfect-scrollbar */} always > {listTodo.map((item, index) => { return (
    {index + 1} - {item.title}   
    ); })}
    {/* 3th-party table: example */} {listTodo.map((item, index) => { return ( ); })}
    Name Action
    {index + 1} - {item.title}
    ``` ```js // access scrollbar (your handler) refScroll.current.element.scrollTop = 0 || refScroll.current.update() ```
    --- #### Props | props | type | description | |----------------------|-------------------------------|---------------------------------------------------------------------------------------| | options | Object | [perfect-scrollbar/options](https://github.com/mdbootstrap/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 | | injectTable | Boolean | When you update for 3th-party table. Default `false` | | wheelStop | Boolean | wheelPropagation (quick in options). Default: `true` | | refScroll | useRef | If you want to use scrollbar (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 children), so you shouldn't update the border for tagName. ```js // => no // => OK ``` + `injectTable` ```js // It will try to add the perfect scrollbar to the `tbody` of the `first` table found. ``` + you should use `ul/dl/ol` with basic ```js
      ...
    ```
    #### Run basic LIVE EXAMPLE special LIVE EXAMPLE ```js npm install ``` ```js npm run dev npm run start ``` #### License MIT