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.

Fieldset component

Renders a <fieldset> with a <legend>.

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.

MIT Licensed