import { useMeasure } from '@react-hookz/web' ; import { useContext } from 'react' ; import { FixedSizeGrid as IndexedGrid } from 'react-window' ; import Cell from './Cell' ; import styles from './MatrixVis.module.css' ; import StickyGrid from './StickyGrid' ; import { SettingsContext } from './context' ; function Grid ( ) { const { rowCount , columnCount , cellSize , setRenderedItems } = useContext ( SettingsContext ) ; const [ wrapperSize , wrapperRef ] = useMeasure < HTMLDivElement > ( ) ; return ( < div ref = { wrapperRef } className = { styles . wrapper } > { wrapperSize && ( < IndexedGrid className = { styles . grid } innerElementType = { StickyGrid } width = { wrapperSize . width } height = { wrapperSize . height } rowHeight = { cellSize . height } rowCount = { rowCount } columnWidth = { cellSize . width } columnCount = { columnCount } overscanCount = { 8 } onItemsRendered = { setRenderedItems } > { Cell } < /IndexedGrid>)} < /div>); } export default Grid ;