npm.io
0.1.1 • Published 7 years ago

react-css-grid-virtualized

Licence
MIT
Version
0.1.1
Deps
2
Size
19 kB
Vulns
0
Weekly
0
Stars
1
SummaryDependencyVersions

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

Keywords

reactgridvirtualized