virtual-window

For background on this
component, see this Dev.to Article.

Installation

``bash
npm i virtual-window
`

Usage

You can place a Virtual Window over a set of arbitrary React components by simply wrapping them

`jsx
function MyComponent({ list }) {
return (


{list.map(l => (

))}


)
}
`

You can also use the mode where it is a virtual list, in this mode you specify a number of parameters

| Parameter | Default | Purpose |
| ---------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| className | | A class to apply to the outer wrapper component |
| item | a fragment like component | The item that will be used to display this element. This component is passed properties for the item being displayed and the index of it.

e.g. } /> |
| itemSize | 36 | The default size to expect for items |
| keyFn | WeakMap of items to unique integers | A function to create a key for an item in the list.

e.g. v.id}/> |
| list | | The array of items to display |
| pass | item | a string containing the name of the property to pass to the item being rendered. |
| onConfigure | | A callback function that receives properties of the Virtual Window in attributes called expectedSize and scrollingElement. The callback is triggered whenever measurement detects a change in the expected size of items.
| onVisibleChanged | | A callback function that receives the first and last visible items as they change onVisibleChanged={(first, last)=>console.log(first, last)}.

You can use this property to update the list and provide endless scrolling.
| overscan | 2 | The number of additional pages to render below and above the visible list for sizing |
| totalCount | | The number of records to render, this is used instead of a list to have the component totally virtual. In this case the item passed to the rendered component is the index to use for the data. |

$3

By default the virtual item container has a height of 100% and a flex of 1. This allows it to resize into various
useful containers. If you need to specify a height then either size the wrapping component or pass a className to the

$3

`jsx
import { VirtualWindow } from "lib/VirtualWindow"
import { Box, IconButton } from "@material-ui/core"
import { useState, useMemo } from "react"
import { MdExpandLess, MdExpandMore } from "react-icons/md"
import randomColor from "randomcolor"
import { routes } from "./routes"
import { makeStyles } from "@material-ui/core"

const useStyles = makeStyles({
virtualBox: {
height: 370,
background: "#0002",
overflow: "auto"
}
})


export const items = Array.from({ length: 2000 }, (_, i) => ({
content: i,
color: randomColor()
}))

export default function App() {
const classes = useStyles()

return (


``

Demonstration

On CodeSandBox