<commit_before># gridisgood

**The project is frozen, use [React-Grid-Layout](https://github.com/STRML/react-grid-layout) instead.**

gridisgood is yet another grid system, heavily inspired by [gridster.js](http://gridster.net/).

Unlike [React-Grid-Layout](https://github.com/STRML/react-grid-layout), gridisgood does not provide drag functionality per se, using different approach to make it feel draggable. If at some point it turns out that gridisgood doesn't quite fit your needs, go check [React-Grid-Layout](https://github.com/STRML/react-grid-layout) out.

The best thing about gridisgood is that it has no dependencies (except for React itself.)

Anyway, install, beat the living daylights out of it, fork, pull, open an issue, you name it. And most importantly, don't forget to have fun.

Cheers.


## Installation

npm install gridisgood

## Basic Usage

```javascript
var React = require('react');
var ReactDOM = require('react-dom');
var Grid = require('gridisgood');

var Demo = React.createClass({
    render: function() {
        return (
            <div>
                <Grid
                    baseWidth={100}
                    baseHeight={100}
                    margins={[10, 10]}
                    handle={true}
                    addable={false}
                    removable={true}
                    resizable={true}
                    rowsExpandable={true}
                    colsExpandable={true}
                    // buildFromArray is an optional prop
                    // Use either it or nested divs i.e. this.props.children
                    // buildFromArray={[{'row':0,'col':0,'rowspan':1,'colspan':3,'children':"1"}]}
                >
                    <div colspan={3} rowspan={1} row={0} col={0}>1</div>
                    <div colspan={1} rowspan={1} row={0} col={3}>2</div>
                    <div colspan={1} rowspan={1} row={0} col={4}>3</div>
                    <div colspan={1} rowspan={2} row={0} col={5}>4</div>
                    
                    <div colspan={1} rowspan={1} row={1} col={0}>5</div>
                    <div colspan={1} rowspan={1} row={1} col={1}>6</div>
                    <div colspan={1} rowspan={1} row={1} col={2}>7</div>
                    <div colspan={2} rowspan={1} row={1} col={3}>8</div>
                </Grid>
            </div>
        );
    }
});

ReactDOM.render(
    <Demo />,
    document.body
);

```

`buildFromArray` is an optional prop which must be an array of objects with at least `row`, `col`, `rowspan` and `colspan` properties defined.
You can use either it or nested divs i.e. `this.props.children`. If both are provided, `buildFromArray` prop is used.

## Serialization

Define React's `ref` attribute on the Grid component. You can then access component's `serialize` method as you would usually do. The method returns an array of objects representing the current layout. Combined with `buildFromArray` prop that array can be used to restore the layout later on.

```javascript
// ...
var Serializable = React.createClass({
    serialize: function() {
        console.log(this.refs.SerializableGrid.serialize());
    },
    
    render: function() {
        return (
            <div>
                <Grid
                    ref='SerializableGrid'
                    baseWidth={100}
                    baseHeight={100}
                    margins={[10, 10]}
                    // ...
                    // ...
                >
                </Grid>
                <button onClick={this.serialize}>Serialize</button>
            </div>

```

## Playground

You can give gridisgood a go here: [jsFiddle](http://jsfiddle.net/jackunion/z1jpmtmL/)

![gridisgood](https://github.com/jackunion/gridisgood/blob/master/demo.png)
<commit_msg>the project is frozen<commit_after># gridisgood

**The project is frozen, use [React-Grid-Layout](https://github.com/STRML/react-grid-layout) instead.**

gridisgood is yet another grid system, heavily inspired by [gridster.js](http://gridster.net/).

Unlike [React-Grid-Layout](https://github.com/STRML/react-grid-layout), gridisgood does not provide drag functionality per se, using different approach to make it feel draggable. If at some point it turns out that gridisgood doesn't quite fit your needs, go check [React-Grid-Layout](https://github.com/STRML/react-grid-layout) out.

The best thing about gridisgood is that it has no dependencies (except for React itself.)

Anyway, install, beat the living daylights out of it, fork, pull, open an issue, you name it. And most importantly, don't forget to have fun.

Cheers.

## Basic Usage

```javascript
var React = require('react');
var ReactDOM = require('react-dom');
var Grid = require('gridisgood');

var Demo = React.createClass({
    render: function() {
        return (
            <div>
                <Grid
                    baseWidth={100}
                    baseHeight={100}
                    margins={[10, 10]}
                    handle={true}
                    addable={false}
                    removable={true}
                    resizable={true}
                    rowsExpandable={true}
                    colsExpandable={true}
                    // buildFromArray is an optional prop
                    // Use either it or nested divs i.e. this.props.children
                    // buildFromArray={[{'row':0,'col':0,'rowspan':1,'colspan':3,'children':"1"}]}
                >
                    <div colspan={3} rowspan={1} row={0} col={0}>1</div>
                    <div colspan={1} rowspan={1} row={0} col={3}>2</div>
                    <div colspan={1} rowspan={1} row={0} col={4}>3</div>
                    <div colspan={1} rowspan={2} row={0} col={5}>4</div>
                    
                    <div colspan={1} rowspan={1} row={1} col={0}>5</div>
                    <div colspan={1} rowspan={1} row={1} col={1}>6</div>
                    <div colspan={1} rowspan={1} row={1} col={2}>7</div>
                    <div colspan={2} rowspan={1} row={1} col={3}>8</div>
                </Grid>
            </div>
        );
    }
});

ReactDOM.render(
    <Demo />,
    document.body
);

```

`buildFromArray` is an optional prop which must be an array of objects with at least `row`, `col`, `rowspan` and `colspan` properties defined.
You can use either it or nested divs i.e. `this.props.children`. If both are provided, `buildFromArray` prop is used.

## Serialization

Define React's `ref` attribute on the Grid component. You can then access component's `serialize` method as you would usually do. The method returns an array of objects representing the current layout. Combined with `buildFromArray` prop that array can be used to restore the layout later on.

```javascript
// ...
var Serializable = React.createClass({
    serialize: function() {
        console.log(this.refs.SerializableGrid.serialize());
    },
    
    render: function() {
        return (
            <div>
                <Grid
                    ref='SerializableGrid'
                    baseWidth={100}
                    baseHeight={100}
                    margins={[10, 10]}
                    // ...
                    // ...
                >
                </Grid>
                <button onClick={this.serialize}>Serialize</button>
            </div>

```

{'fraction_non_alphanumeric': 0.13155737704918033, 'fraction_numerical': 0.017896174863387977, 'mean_word_length': 1.984508764777823, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 57, 'https://': 7, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4750051', 'n_tokens_mistral': 2137, 'n_tokens_neox': 1995, 'n_words': 603}