2.2.4 • Published 3 months ago

react-perfect-scrollbar-z v2.2.4

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

NPM JavaScript Style Guide Downloads


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 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
    import Scroll as Scrollbar from 'react-perfect-scrollbar-z'; // 
    // const refScroll = useRef(null) // you handle scrollbar

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

    <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>
data-list (ul/ol/dl)
    <ScrollbarDataList
        effectData={listTodo}
        refScroll={ref}
        {/* tagName?: 'ul' | 'dl' | 'ol'; */}
        maxHeight="200px"
        always
    >
        {listTodo.map((item, index) => {
            return (
                <li
                key={index}
                style={{
                    background: 'rgb(243 244 246)',
                }}
                >
                <b>
                    {index + 1} - {item.title}
                </b>
                &nbsp;&nbsp;
                <button onClick={() => delItem(item)}>Delete</button>
                </li>
            );
        })}
    </ScrollbarDataList>
tbody
    const [listTodo, setListTodo] = useState<any[]>([]);
    <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Action</th>
          </tr>
        </thead>
        <ScrollbarTBody
          effectData={listTodo}
          // effectData = { [listTodo, showHide, ....more] }
          maxHeight="130px"
          always
        >
          {listTodo.map((item, index) => {
            return (
              <tr key={index} style={{ borderBottom: '1px solid' }}>
                <td style={{ background: 'red', color: '#fff' }}>
                  {index + 1} - {item.title}
                </td>
                <td style={{ background: 'green', textAlign: 'center' }}>
                  <button onClick={() => delItem(item)}>Delete</button>
                </td>
              </tr>
            );
          })}
        </ScrollbarTBody>
    </table>
injectTable (3th-party table)
    <div style={{ boxShadow: '0px 0px 8px rgb(0 0 0 / 60%)' }}>
        <Scrollbar
          effectData={listTodo}
          refScroll={ref}
          maxHeight="200px"
          injectTable
          {/* => find first table append perfect-scrollbar */}
          always
        >
          {listTodo.map((item, index) => {
            return (
              <div
                key={index}
                style={{
                  background: 'rgb(243 244 246)',
                }}
              >
                <b>
                  {index + 1} - {item.title}
                </b>
                &nbsp;&nbsp;
                <button onClick={() => delItem(item)}>Delete</button>
              </div>
            );
          })}

          <div>
            {/* 3th-party table: example */}
            <table>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {listTodo.map((item, index) => {
                  return (
                    <tr key={index} style={{ borderBottom: '1px solid' }}>
                      <td style={{ background: 'red', color: '#fff' }}>
                        {index + 1} - {item.title}
                      </td>
                      <td style={{ background: 'green', textAlign: 'center' }}>
                        <button onClick={() => delItem(item)}>Delete</button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Scrollbar>
    </div>
    // access scrollbar (your handler)
    refScroll.current.element.scrollTop = 0  || refScroll.current.update()

Props

propstypedescription
optionsObjectperfect-scrollbar/options
tagNameStringContainer scrollbar. Default div
effectDataString, Array, Object,.....Automatically update the scrollbar if the effectData has changed.
alwaysbooleanAlways show scrollbar if data is overflow (true). Default false
maxHeightpx, %, vhmax-height of scrollbar
heightpx, %, vhheight of scrollbar
maxWidthpx, %, vwmax-width of scrollbar
widthpx, %, vwwidth of scrollbar
classNameStringYour css-class
styleObjectYour css-style
injectTableBooleanWhen you update for 3th-party table. Default false
wheelStopBooleanwheelPropagation (quick in options). Default: true
refScrolluseRefIf you want to use scrollbar (ps scrollbar)
---------
onScrollYFunctiony-axis is scrolled in either direction.
onScrollXFunctionx-axis is scrolled in either direction.
onScrollUpFunctionscrolling upwards.
onScrollDownFunctionscrolling downwards.
onScrollLeftFunctionscrolling to the left.
onScrollRightFunctionscrolling to the right.
onYReachStartFunctionscrolling reaches the start of the y-axis.
onYReachEndFunctionscrolling reaches the end of the y-axis (useful for infinite scroll).
onXReachStartFunctionscrolling reaches the start of the x-axis.
onXReachEndFunctionscrolling 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.

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

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

    // It will try to add the perfect scrollbar to the `tbody` of the `first` table found.
  • you should use ul/dl/ol with basic
    <Scrollbar effectData={abcd} .... > <ul> <for>...</for> </ul> <Scrollbar>

Run

basic LIVE EXAMPLE

special LIVE EXAMPLE

npm install
npm run dev
npm run start

License

MIT