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

MIT Licensed