{"_id":"@aestetype/react-fixed-grid","_rev":"2-12cfee3c113fde44b40b6a95e7e39a8e","name":"@aestetype/react-fixed-grid","description":"Create a fixed grid system for react","dist-tags":{"latest":"0.0.9"},"versions":{"0.0.9":{"name":"@aestetype/react-fixed-grid","version":"0.0.9","description":"Create a fixed grid system for react","main":"lib/index.js","scripts":{"test":"npm run lint && npm run build","lint":"eslint src","build":"babel src --out-dir lib","build:docs":"styleguidist build","start:examples":"webpack-dev-server","build:examples":"browserify examples/basic.js -o examples/app.bundle.js -t [ babelify --presets [ es2015 react stage-1 ] ]","docs:start":"styleguidist server","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/aestetype/react-fixed-grid.git"},"license":"MIT","bugs":{"url":"https://github.com/aestetype/react-fixed-grid/issues"},"homepage":"https://github.com/aestetype/react-fixed-grid#readme","peerDependencies":{"react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"devDependencies":{"babel-cli":"^6.24.1","babel-core":"^6.24.1","babel-eslint":"^7.2.3","babel-loader":"^7.0.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-1":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","eslint":"^3.19.0","eslint-config-airbnb":"^14.1.0","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"^4.0.0","eslint-plugin-react":"^6.10.3","react":"^15.4.1","react-docgen":"^2.12.1","react-dom":"^15.4.1","react-event-listener":"^0.4.5","react-styleguidist":"^4.4.1","webpack":"^2.6.1","webpack-dev-server":"^2.4.5"},"dependencies":{"classnames":"^2.2.5","prop-types":"^15.5.10","react-draggable":"^2.2.6","react-jss":"^6.1.1"},"gitHead":"2e8ef078dc559731bb5ded4882c79d5e55a9ccd9","_id":"@aestetype/react-fixed-grid@0.0.9","_npmVersion":"5.6.0","_nodeVersion":"9.4.0","_npmUser":{"name":"zadkiel","email":"zadkiel.aharonian@gmail.com"},"dist":{"integrity":"sha512-YWsSvHFEp9VKMo5UZW4lk5J2S7mUJxd6Q139acRyLPwuCanWQnPd4Z/0kTyKCa0pNf1V+l8mAWUXcbMIy57LPQ==","shasum":"7fdd6eede7ccbd4a6bc82e1a7430562ef4c9c6e5","tarball":"https://registry.npmjs.org/@aestetype/react-fixed-grid/-/react-fixed-grid-0.0.9.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSQ09O91puq07+5oUUaerDBCrOBjLDl7Z6oC8SSJocwAiEAmi0vsFXR2PkZ6L6rvk8DC5zN1IxiauRsnf+ANPbEfzY="}]},"maintainers":[{"name":"zadkiel","email":"zadkiel.aharonian@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-fixed-grid-0.0.9.tgz_1516803979203_0.9510988756082952"},"directories":{}}},"readme":"# react-fixed-grid\n\nCreate a fixed grid system for react.\n\n[![Build Status](https://travis-ci.org/aestetype/react-fixed-grid.svg?branch=master)](https://travis-ci.org/aestetype/react-fixed-grid)\n\n## Installation\n\nWith npm: `npm install @aestetype/react-fixed-grid --save`\n\nOr with yarn: `yarn add @aestetype/react-fixed-grid`\n\n## Usage\n\n```javascript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Grid, GridItem } from '@aestetype/react-fixed-grid';\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      boxes: [\n        { x: 0, y: 0, w: 1, h: 1 },\n        { x: 1, y: 0, w: 2, h: 2 },\n      ],\n    };\n  }\n\n  onItemChange = (index, { x, y, w, h }) => {\n    const boxes = this.state.boxes;\n    boxes[index] = { x, y, w, h };\n    this.setState({ boxes });\n  }\n\n  render() {\n    const { sheet: { classes } } = this.props;\n    const { boxes, width, height } = this.state;\n    return (\n      <Grid\n        rows={8}\n        columns={12}\n        onItemChange={this.onItemChange}\n        width={1920}\n        height={1080}\n        margin={10}\n        gutter={5}\n      >\n        {boxes.map((box, index) =>\n          <GridItem\n            x={box.x} y={box.y} w={box.w} h={box.h} key={index}\n            isDraggable isResizable\n            draggableClassName=\"draggable\"\n            resizableClassName=\"resizable\"\n          >\n            <div>\n              <div className=\"draggable\">\n                <i className=\"material-icons\">drag_handle</i>\n              </div>\n              <div className=\"resizable\">\n                <i className=\"material-icons\">open_with</i>\n              </div>\n              Box {index}\n            </div>\n          </GridItem>,\n        )}\n      </Grid>\n    );\n  }\n}\n\nReactDOM.render(<App />, document.getElementById('app'));\n```\n","maintainers":[{"email":"pradel.leo@gmail.com","name":"leopradel"},{"email":"zadkielhello@gmail.com","name":"zadkiel"}],"time":{"modified":"2022-04-04T11:49:40.309Z","created":"2018-01-24T14:26:20.210Z","0.0.9":"2018-01-24T14:26:20.210Z"},"homepage":"https://github.com/aestetype/react-fixed-grid#readme","repository":{"type":"git","url":"git+https://github.com/aestetype/react-fixed-grid.git"},"bugs":{"url":"https://github.com/aestetype/react-fixed-grid/issues"},"license":"MIT","readmeFilename":"README.md"}