react-squarely

Component to arrange items in square grids.

Table of Contents

• Dependencies
• Support
• Development Setup
• Usage
• Implementation

Dependencies

• node (developed on v7.9.0)
• watchman (jest dependency)
• yarn (recommended)

Support

Tested on:

• Google Chrome 61
• FirefoxDeveloperEdition 57.0b8
• Internet Explorer 10 (Win7 VM)
• Internet Explorer 11 (Win7 VM)

Please note that for older browser you may need to use something like babel-polyfill.

Development Setup

• Install watchman

$ brew install watchman

• Run sample app

$ yarn start:sample

• Run test watcher

$ yarn watch:test

Usage

• Install from npm

$ npm install react-squarely

• In code

import { Grid, Item } from 'react-squarely';

function TestComponent() {
  return (
    <div style={{ width: '400px' }}
      <Grid columnCount={3} gutterSize={0.5}>
        <Item origin={{ column: 0, row: 0 }} span={{ column: 1, row: 1 }}>
          Something here
        </Item>
        <Item origin={{ column: 1, row: 1 }} span={{ column: 1, row: 1 }}>
          Something there
        </Item>
      </Grid>
    </div>
  );
}