React-gridforms NPM

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`