November's Paddleball Marathon

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

    1.0.0 • Public • Published

    react-xy-grid

    React component that wraps Foundation's XY Grid.

    code style: prettier Commitizen friendly npm version

    Table of Contents

    Installation

    Begin by installing the package as a dependency.

    npm i -S react-xy-grid

    Start utilizing the components where needed.

    import * as React from "react";
    import { Cell, Grid, GridContainer } from "react-xy-grid";
     
    const Home = () => {
      return (
        <GridContainer>
          <Grid gridX valign="middle">
            <Cell sm={12} lg={6}>
              <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span>
            </Cell>
            <Cell sm={12} lg={6}>
              <a href="/explicabo">Explicabo!</a>
            </Cell>
          </Grid>
        </GridContainer>
      );
    };
     
    export default Home;

    Cell

    Name Type Required Default Value
    auto boolean false false
    children ReactNode true undefined
    className string false undefined
    component string false "div"
    lg "auto", "shrink", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12 false undefined
    lgOffset 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12 false undefined
    md "auto", "shrink", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12 false undefined
    mdOffset 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12 false undefined
    shrink boolean false false
    sm "auto", "shrink", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12 false undefined
    smOffset 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12 false undefined
    valign "bottom", "middle", "stretch", or "top" false undefined

    Grid

    Name Type Required Default Value
    align "center", "justify", "right", or "spaced" false undefined
    children ReactNode true undefined
    className string false undefined
    component string false "div"
    gridX boolean false false
    gridY boolean false false
    height number or string false undefined
    lgCollapse "margin" or "padding" false undefined
    lgUp 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12 false undefined
    marginX boolean false false
    marginY boolean false false
    mdCollapse "margin" or "padding" false undefined
    mdUp 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12 false undefined
    paddingX boolean false false
    paddingY boolean false false
    smCollapse "margin" or "padding" false undefined
    smUp 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12 false undefined
    valign "bottom", "middle", "stretch", or "top" false undefined

    Grid Container

    Name Type Required Default Value
    children ReactNode true undefined
    className string false undefined
    component string false "div"
    fluid boolean false false
    full boolean false false

    Notes

    If you import the components for use via the module namespace like so:

    import { Cell, Grid, GridContainer } from "react-xy-grid";

    Using this syntax, you will not have to manually import the CSS file as the module's index file import's a compiled CSS version of the Foundation styles.

    This assumes that your build system is configured to handle importing .css files in your scripts.

    However, there is a .scss in the module's directory that can be used to generate the Foundation styles at compile time. If this is the desired result, you will need to adjust the above import statement, to avoid importing the .css file.

    import Cell from "react-xy-grid/Cell/Cell";
    import Grid from "react-xy-grid/Grid/Grid";
    import GridContainer from "react-xy-grid/GridContainer/GridContainer";

    This may be valuable if your build system is not configured to handle importing .css files in your scripts.

    Additionally, you will have to import the module's .scss file.

    @import "~react-xy-grid/index.scss";
     
    // or 
     
    @import "../../node_modules/react-xy-grid/index.scss";

    The first import example assumes your sass compiler supports the ~ syntax to import from node_modules

    Install

    npm i react-xy-grid

    DownloadsWeekly Downloads

    10

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    319 kB

    Total Files

    18

    Last publish

    Collaborators

    • jsanchezio