react-gridforms
react-gridforms copied to clipboard
insin
React components for Gridforms form layout
react-gridforms
React components for form layout with Gridforms.
Live Demo
Install
Note: Webpack 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 (development version)
- react-gridforms.min.js (compressed production version)
- Use gridforms.css via RawGit with the browser bundle.
Usage
var GridForms = require('react-gridforms')
// or
var {GridForm, Fieldset, Row, Field} = require('react-gridforms')
// or
import {GridForm, Fieldset, Row, Field} from 'react-gridforms'
Nest <Fieldset>, <Row> and <Field> components under a <GridForm> as necessary, using a span prop to control the relative size of each field.
<GridForm>
<Fieldset legend="Add to inventory">
<Row>
<Field span={3}>
<label>Product Name</label>
<input type="text" autoFocus/>
</Field>
<Field>
<label>Tags</label>
<input type="text"/>
</Field>
</Row>
</Fieldset>
</GridForm>
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 <form> 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 <fieldset> with a <legend>.
| Prop | Description |
|---|---|
legend |
Contents for the <legend>, which will only be rendered when a legend prop is provided |
Row component
Renders a <div> 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 |
insin