react-grata

react-grata

Light weight react grid layout component that support IE 11. What you draw is what you get.

Goals

• Provide a simplified API to use CSS Grid.
• Support IE 11 with the same API.
• Decouple layout away from the component trees.
• Enable dynamic layout generation.

Demos

• Basic
• More Examples

Install

npm install --save react-grata

Usage

import React from 'react'

import { Grid, Cell } from 'react-grata'

const App = () => {
  const matrix = [
    [1, 1, 1],
    [2, 3, 3],
    [2, 5, 6],
    [7, 7, 6],
    [8, 8, 8],
  ];
  const rowGap = "10px"
  const columnGap = "24px"

  return (
    <Grid rowGap={rowGap} columnGap={columnGap} matrix={matrix}>
      <Cell id={1}>Component One</Cell>
      <Cell id={2}>Component Two</Cell>
      <Cell id={3}>Component Three</Cell>
      <Cell id={5}>Component Five</Cell>
      <Cell id={6}>Component Six</Cell>
      <Cell id={7}>Component Seven</Cell>
      <Cell id={8}>Component Eight</Cell>
    </Grid>
  )
}

More Usages

API Reference

License

MIT © zhenyanghua