https://github.com/insin/react-gridforms
React components for Gridforms form layout
https://github.com/insin/react-gridforms
forms react react-components
Last synced: 10 months ago
JSON representation
React components for Gridforms form layout
- Host: GitHub
- URL: https://github.com/insin/react-gridforms
- Owner: insin
- License: mit
- Created: 2015-11-14T16:46:40.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-31T01:13:14.000Z (almost 10 years ago)
- Last Synced: 2025-08-28T06:03:10.094Z (10 months ago)
- Topics: forms, react, react-components
- Language: JavaScript
- Homepage: http://insin.github.io/react-gridforms
- Size: 20.5 KB
- Stars: 29
- Watchers: 5
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
# react-gridforms
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
React components for form layout with [Gridforms](https://github.com/kumailht/gridforms).
## [Live Demo](http://insin.github.io/react-gridforms/)
## Install
**Note: [Webpack](http://webpack.github.io/) is _required_ in order to use this component from npm.**
```
npm install react-gridforms
```
Browser bundles are available, which export a global `GridForms` variable and expect to find a global ``React`` variable to work with.
* [react-gridforms.js](https://npmcdn.com/react-gridforms/umd/react-gridforms.js) (development version)
* [react-gridforms.min.js](https://npmcdn.com/react-gridforms/umd/react-gridforms.min.js) (compressed production version)
* Use [gridforms.css](https://cdn.rawgit.com/kumailht/gridforms/master/gridforms/gridforms.css) via RawGit with the browser bundle.
## Usage
```javascript
var GridForms = require('react-gridforms')
// or
var {GridForm, Fieldset, Row, Field} = require('react-gridforms')
// or
import {GridForm, Fieldset, Row, Field} from 'react-gridforms'
```
Nest ``, `` and `` components under a `` as necessary, using a `span` prop to control the relative size of each field.
```js
Product Name
Tags
```
Row spans will be calculated based on their Fields, so you only have to specify `span` props for fields which need more than the default of `1`.
## API
All components will pass any props not documented below to the container element they render.
### `GridForm` component
Renders a `` with a `.grid-form` class by default.
Prop | Default | Description
---- | ------- | -----------
`className` | | An additional class name for the element rendered by the component
`component` | `'div'` | The container component to be rendered - can be a tag name or a custom React component
`custom` | `false` | Flag to indicate a custom build of Gridforms is being used - when `true` the default `.grid-form` class will not be used, only the provided `className`
### `Fieldset` component
Renders a `` with a ``.
Prop | Description
---- | -----------
`legend` | Contents for the ``, which will only be rendered when a `legend` prop is provided
### `Row` component
Renders a `
` and calculates a GridForms `data-row-span` attribute based on the `span` props of its `Field` component children.
### `Field` component
Container for an input field.
Prop | Default | Description
---- | ------- | -----------
`span` | `1` | Relative size of the field compared to others in the same `Row` - can be expressed as a Number or a String
## MIT Licensed
[build-badge]: https://img.shields.io/travis/insin/react-gridforms/master.svg?style=flat-square
[build]: https://travis-ci.org/insin/react-gridforms
[npm-badge]: https://img.shields.io/npm/v/react-gridforms.svg?style=flat-square
[npm]: https://www.npmjs.org/package/react-gridforms
[coveralls-badge]: https://img.shields.io/coveralls/insin/react-gridforms/master.svg?style=flat-square
[coveralls]: https://coveralls.io/github/insin/react-gridforms