react-xy-grid v1.0.0

react-xy-grid

React component that wraps Foundation's XY Grid.

Table of Contents

• Installation
• Cell
• Grid
• GridContainer
• Notes

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

Grid

Grid Container

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