react-grata
TypeScript icon, indicating that this package has built-in type declarations

1.0.9 • Public • Published

react-grata

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

NPM JavaScript Style Guide

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.

Demo

Demos

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

Package Sidebar

Install

npm i react-grata

Weekly Downloads

5

Version

1.0.9

License

MIT

Unpacked Size

69.6 kB

Total Files

13

Last publish

Collaborators

  • zhenyanghua