react-css-grid-virtualized v0.1.1

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

Examples

See EXAMPLES.md