@smarthr/use-virtual-scroll
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

@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 を指定できます。

name required type description
marginItemCount - number スクロールコンテナ外にリストアイテムをいくつ表示しておくかの設定です。スクロール時のリストアイテムのちらつきが気になる場合は値を設定してください。デフォルト値は0です。

License

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

Readme

Keywords

none

Package Sidebar

Install

npm i @smarthr/use-virtual-scroll

Weekly Downloads

225

Version

1.1.4

License

MIT

Unpacked Size

14.2 kB

Total Files

9

Last publish

Collaborators

  • shingo.sasaki
  • kesteer
  • yamish123
  • ackndev
  • ibulog
  • alpaca-tc
  • nabeliwo
  • atsushim
  • koba04
  • im36.123
  • smarthr-dev
  • ykarakita
  • cidermitaina
  • meganemura
  • wata727
  • wmoai
  • diescake
  • moshisora
  • tokky0425
  • hawaiiman
  • smarthr-admin
  • yamamoto-yuta
  • kgsi
  • otapo
  • kuny