0.1.4 • Published 9 years ago
react-gridstack v0.1.4
React-GridStack
Wrapper library for GridStack.
Installing
NPM (preferred)
npm install react-gridstack
Browser
To use this package in the browser, clone this repo and run gulp build
. Then,
copy the react-gridstack.min.js and react-gridstack.min.css files from the
dist
directory and include them in your html head. Note that this files
include jQuery, jQuery-UI and lodash.
Usage:
import React from 'react'
import { GridStack, GridStackItem } from 'react-gridstack'
class MyGrid extends React.Component {
render () {
<GridStack cellHeight={50} verticalMargin={10}>
<GridStackItem id="item_1" x={0} y={0} minHeight={2} minWidth={2}>
First Item
</GridStackItem>
<GridStackItem id="item_2" x={0} y={2}>
Second Item
</GridStackItem>
</GridStack>
}
}
Make sure to include the css file in your bundle.
Options
Aside from all the (options)https://github.com/troolee/gridstack.js/tree/master/doc accepted by gridstack.js, the following props can be also passed to the components.
GridStackItem options
- onShouldUpdate(prevElement, newElement): Function to be called with the
previous prop version and new prop version of the element. It must return
true
orfalse
to indicate if the element should be re-rendered. Very similar in function toshouldComponentUpdate
from react.
Collaborate
See anything missing? Fork, implement and submit a pull request.
License
See the license file.