Wondering what’s next for npm?Check out our public roadmap! »

    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

    Install

    npm i react-grata

    DownloadsWeekly Downloads

    3

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    69.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar