React CSS Grid Virtualized

This library is for showing one-dimensional data in a two-dimensional way, at least for now.

Quick Start

yarn add react-css-grid-virtualized

Plain JavaScript:

import Grid from "react-css-grid-virtualized"

// `id` is a placeholder for your item props
function ItemComponent({ gridColumnStart, gridRowStart, id }) {
  return <div style={{ gridColumnStart, gridRowStart }}>{id}</div>
}

const data = [{ id: 1 }, { id: 2 }]

function YourComponent() {
  return (
    <Grid Item={ItemComponent} items={data} minItemWidth={300} minItemHeight={300}/>
  )
}

TypeScript:

import Grid, { GridPosition } from "react-css-grid-virtualized"

interface ItemProps {
  id: number
}

const ItemComponent: React.FC<ItemProps & GridPosition> = ({ gridColumnStart, gridRowStart, id }) => {
  return <div style={{ gridColumnStart, gridRowStart }}>{id}</div>
}

const data: ItemProps[] = [{ id: 1 }, { id: 2 }]

function YourComponent() {
  return (
    <Grid<ItemProps> Item={ItemComponent} items={data}/>
  )
}

Props

name	type	required	default value	description
className	string	no	""	CSS class(es) to be attached to the grid
Item	React.FC<T & GridPosition>	yes	-	The component used to render the items
items	T[]	yes	-	The data to be rendered
minItemHeight	number	no	0	The items won't be smaller than this
minItemWidth	number	no	0	The items won't be narrower than this
gridGap	number	no	0	The space between rows and columns
padding	number	no	0	The space around the outmost items
preload	number	no	0	The number of rows rendered before/after the visible area

Examples

See EXAMPLES.md