New Prague, Minnesota

    window-lit
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    window-lit

    Hook for virtualizing scrollable lists.

    Bundle size:

    • CommonJS: 4239 B (gzip: 1925 B, brotli: 1729 B)
    • ESModule: 4176 B (gzip: 1936 B , brotli: 1738 B)
    • UMD: 4474 B (gzip: 2008 B , brotli: 1796 B)

    This project is heavily inspired by react-window and react-virtualized.

    Requirements

    • React v17+
    • React DOM v17+

    Installation

    $ npm i window-lit
    # or
    $ yarn add window-lit

    Examples

    Basic example

    import * as React from 'react';
    import ReactDOM from 'react-dom';
    
    import { useWindow } from 'window-lit';
    
    function BasicExample() {
      const parentRef = React.useRef();
    
      const { virtualItems, totalSize } = useWindow(parentRef, {
        size: 10000,
        estimateSize: React.useCallback(() => 35, []),
        overscan: 5,
      });
      
      return (
        <div
          ref={parentRef}
          className="List"
          style={{ width: `100%`, maxHeight: '100vh', overflow: 'auto' }}
        >
          <div
            style={{
              position: 'relative',
              height: `${totalSize}px`,
              width: '100%',
            }}
          >
            {virtualItems.map(row => (
              <div
                key={row.index}
                style={{
                  position: 'absolute',
                  width: '100%',
                  height: `35px`,
                  transform: `translateY(${row.start}px)`,
                }}
              >
                Row {row.index}
              </div>
            ))}
          </div>
        </div>
      );
    }
    
    ReactDOM.render(<BasicExample />, document.getElementById('root'));

    Visit ./examples to view all usage examples.

    Development

    (1) Install dependencies

    $ npm i
    # or
    $ yarn

    (2) Run initial validation

    $ ./Taskfile.sh validate

    (3) Start developing by running the run_examples task. This spins up a development server hosting the different examples located in the ./examples folder.

    $ ./Taskfile run_examples

    This project was set up by @jvdx/core

    Keywords

    none

    Install

    npm i window-lit

    DownloadsWeekly Downloads

    18

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    17.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • joelvoss