Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edtoken/array-to-grid
Creating a Grid from an Array
https://github.com/edtoken/array-to-grid
Last synced: about 2 months ago
JSON representation
Creating a Grid from an Array
- Host: GitHub
- URL: https://github.com/edtoken/array-to-grid
- Owner: edtoken
- License: mit
- Created: 2017-09-25T21:42:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-12T16:10:52.000Z (almost 7 years ago)
- Last Synced: 2024-11-06T13:57:19.438Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/array-to-grid
- Size: 11.7 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Array to Grid
Creating a Grid from an Array of elements
[](https://travis-ci.org/edtoken/array-to-grid)
[](https://badge.fury.io/js/array-to-grid)
[](https://codeclimate.com/github/edtoken/array-to-grid/maintainability)
[](http://hits.dwyl.com/edtoken/array-to-grid)
[](https://nodei.co/npm/array-to-grid/)
[](https://nodei.co/npm/array-to-grid/)
input
```
[
{_size: 1, ...},
{_size: 0.5, ...},
{_size: 0.4, ...},
{_size: 0.2, ...}
]
```
output
```
[
[{_size: 1, _width: 12, ...}],
[{_size: 0.5, _width: 6, ...}, {_size: 0.4, _width: 6, ...}],
[{_size: 0.2, _width: 2, ...}]
]
```
## Install
```
npm install array-to-grid --save
```
## Usage
### Properties
* ` arrayToGrid.defaultColumnSize ` default column *_size* value
* ` arrayToGrid.defaultRowSize ` sum of width for 1 row
### Arguments
```
/**
* @param {Array} elements - The array of elements for grid
* @param {Integer} [rowSize=12] rowSize - Row size, default 12 (for example bootstrap grid size is 12)
* @param {Integer} [columnSize=0.5] columnSize - Column size, default 0.5 ( 1/2 of row )
* Returns a new array
*/
arrayToGrid(elements:Array, rowSize:Integer, columnSize:Integer)
```
### Make a Form
```
/**
* Сreate a grid for the form
* Use Bootstrap classNames
*/
var arrayToGrid = require('array-to-grid');
var elements = [
{_size: 1, name: 'fullname'},
{_size: 0.5, name: 'email'},
{_size: 0.5, name: 'password'}
];
var rows = arrayToGrid(elements, 12);
var fields = rows.map((row, indx) => {
return (
{row.elements.map((el, elIndx) => {
return (
)
})}
)
});
```
### Make a page blocks
```
import React, {Component} from 'react';
import arrayToGrid from 'array-to-grid';
arrayToGrid.defaultColumnSize = 0.3;
arrayToGrid.defaultRowSize = 12;
const widgets = [
{_size: 1, data: {title: 'widget-1'}},
{data: {title: 'widget-2'}},
{_size: 0.1, data: {title: 'widget-3'}},
{_size: 0.9, data: {title: 'widget-4'}},
{data: {title: 'widget-5'}},
{_size: 0.5, data: {title: 'widget-6'}},
{_size: 0.3, data: {title: 'widget-7'}},
{_size: 0.3, data: {title: 'widget-8'}},
{_size: 0.7, data: {title: 'widget-9'}},
{_size: 0.9, data: {title: 'widget-10'}},
{_size: 0.1, data: {title: 'widget-11'}},
];
class Widget extends Component {
render() {
return (
Column
{this.props.title}
{this.props._size}
);
}
}
class Page extends Component {
render() {
let renderedWidgets = widgets.filter(w => (!w._size || w._size > 0.5));
let widgetsGrid = arrayToGrid(renderedWidgets, 12);
return (
{widgetsGrid.map((row, rowIndx) => {
return (
Row
{row.map((el, colIndx) => (
)
)}
)
})}
)
}
}
```
## Unit testing
```
npm test
```
## Changelog
[CHANGELOG.md](./CHANGELOG.md)
## License
[MIT](https://github.com/edtoken/array-to-grid/blob/master/LICENSE)