@smarthr/use-virtual-scroll v1.1.4

@smarthr/use-virtual-scroll

仮想スクロールをするための React のカスタムフックです。

Usage

window に対してスクロールするリストに仮想スクロールを適用させる場合

import React from 'react'
import { useVirtualScroll } from '@smarthr/use-virtual-scroll'

const ScrollOnWindow = () => {
  const originalItems = [...Array(1000)].map((_, i) => i)
  const itemHeight = 20

  const { items, listRef, createListStyle, createItemStyle } = useVirtualScroll<
    typeof originalItems[number],
    HTMLUListElement
  >(originalItems, itemHeight)

  return (
    <ul ref={listRef} style={createListStyle()}>
      {items.map((item, index) => (
        <li key={index} style={{ height: itemHeight, ...createItemStyle(index) }}>
          {item}
        </li>
      ))}
    </ul>
  )
}

特定の要素内でスクロールするリストに仮想スクロールを適用させる場合

import React from 'react'
import { useVirtualScroll } from '@smarthr/use-virtual-scroll'

const ScrollOnContainer = () => {
  const originalItems = [...Array(1000)].map((_, i) => i)
  const itemHeight = 20

  const {
    items,
    listRef,
    scrollableContainerRef,
    createListStyle,
    createItemStyle,
  } = useVirtualScroll<typeof originalItems[number], HTMLUListElement, HTMLDivElement>(
    originalItems,
    itemHeight,
  )

  return (
    <div
      ref={scrollableContainerRef}
      style={{
        width: 300,
        height: 300,
        overflow: 'auto',
      }}
    >
      <ul ref={listRef} style={createListStyle()}>
        {items.map((item, index) => (
          <li key={index} style={{ height: itemHeight, ...createItemStyle(index) }}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  )
}

Options

第3引数にオブジェクト形式で options を指定できます。

License

This project is licensed under the terms of the MIT license.