react-drip-form-bootstrap

react-drip-form-bootstrap

React Bootstrap component set for react-drip-form.

https://tsuyoshiwada.github.io/react-drip-form-bootstrap/

Table Of Contents

• DEMO
• Getting Started
  • Installation
  • Usage
• API
  • getValidationState
  • Checkbox
  • FieldGroup
  • HorizontalInput
  • HorizontalSelect
  • HorizontalTextarea
  • InlineInput
  • InlineSelect
  • Input
  • Radio
  • Select
  • Textarea
• Related projects
• Contribute
• License

DEMO

See Live Demo.

Getting Started

Installation

react-drip-form and react-bootstrap must also be installed.

$ npm install --save react-bootstrap
$ npm install --save react-drip-form
$ npm install --save react-drip-form-bootstrap

Usage

import React from 'react';
import { dripForm } from 'react-drip-form';
import { Form, FormGroup, Button } from 'react-bootstrap';
import {
  Checkbox,
  FieldGroup,
  Input,
  Radio,
  Select,
  Textarea,
} from 'react-drip-form-bootstrap';

const SampleForm = ({ handlers }) => (
  <Form onSubmit={handlers.onSubmit}>
    <Input
      type="text"
      name="text"
      label="Text Field"
      labelText="Text Field"
      placeholder="placeholder..."
      addonBefore={<InputGroup.Addon>Before</InputGroup.Addon>}
    />

    <Textarea
      name="textarea"
      label="Textarea Field"
      labelText="Textarea Field"
      placeholder="placeholder..."
      addonAfter={<InputGroup.Addon>After</InputGroup.Addon>}
    />

    <Select
      name="select"
      label="Select Field"
      labelText="Select Field"
    >
      <option value="">Select option</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </Select>

    <FormGroup>
      <ControlLabel>Checkbox Group</ControlLabel>
      <FieldGroup
        multiple
        name="checkboxGroup"
        label="Checkbox Group"
      >
        <Checkbox value="checkbox1">Checkbox 1</Checkbox>
        <Checkbox value="checkbox2">Checkbox 2</Checkbox>
        <Checkbox value="checkbox3">Checkbox 3</Checkbox>
      </FieldGroup>
    </FormGroup>

    <FormGroup>
      <ControlLabel>Radio Group</ControlLabel>
      <FieldGroup
        name="radioGroup"
        label="Radio Group"
      >
        <Radio value="radio1">Radio 1</Radio>
        <Radio value="radio2">Radio 2</Radio>
        <Radio value="radio3">Radio 3</Radio>
      </FieldGroup>
    </FormGroup>

    <FormGroup>
      <Button onClick={handlers.onSubmit}>Submit</Button>
    </FormGroup>
  </Form>
);

Inline layout and horizontal layout are also supported. For details, please refer to Live DEMO.

API

All other than Props described below are the same as React Bootstrap.

getValidationState

It is a function for determining the validation state. It takes a field Props as an argument and returns 'error' or null.

By default the following code is used.

({ meta }) => (meta.error && meta.touched && meta.dirty) ? 'error' : null

Checkbox

It's a Checkbox Component.

Props	Default	Type	Description
getValidationState	see	Function	ref: getValidationState

FieldGroup

It's a FieldGroup Component.

Props	Default	Type	Description
children	undefined	React$Element	Specify child elements such as Checkbox and Radio.
getValidationState	see	Function	ref: getValidationState

HorizontalInput

It's <Input /> Component of the horizontal layout.

Props	Default	Type	Description
id	undefined	string	The ID that you specify for FormGroup.controlId, ControlLabel.htmlFor, and FormControl.id.
bsSize	undefined	string	The size of the FormGroup, ControlLabel and FormControl.
groupProps	{}	Object	Props passed to FormGroup.
labelColProps	{}	Object	Props passed to <Col componentClass={ControlLabel} />.
labelText	undefined	React$Element	The label of the field. ControlLabel is used for label rendering.
controlColProps	{}	Object	Props passed to Col.
inputGroupProps	{}	Object	Props passed to InputGroup. Valid only when addonBefore or addonAfter is specified.
addonBefore	undefined	React$Element	Specify InputGroup.Addon component.
addonAfter	undefined	React$Element	Specify InputGroup.Addon component.
getValidationState	see	Function	ref: getValidationState

HorizontalSelect

It's <Select /> Component of the horizontal layout.

Props	Default	Type	Description
id	undefined	string	The ID that you specify for FormGroup.controlId, ControlLabel.htmlFor, and FormControl.id.
bsSize	undefined	string	The size of the FormGroup, ControlLabel and FormControl.
groupProps	{}	Object	Props passed to FormGroup.
labelColProps	{}	Object	Props passed to <Col componentClass={ControlLabel} />.
labelText	undefined	React$Element	The label of the field. ControlLabel is used for label rendering.
controlColProps	{}	Object	Props passed to Col.
inputGroupProps	{}	Object	Props passed to InputGroup. Valid only when addonBefore or addonAfter is specified.
addonBefore	undefined	React$Element	Specify InputGroup.Addon component.
addonAfter	undefined	React$Element	Specify InputGroup.Addon component.
getValidationState	see	Function	ref: getValidationState

HorizontalTextarea

It's <Textarea /> Component of the horizontal layout.

Props	Default	Type	Description
id	undefined	string	The ID that you specify for FormGroup.controlId, ControlLabel.htmlFor, and FormControl.id.
bsSize	undefined	string	The size of the FormGroup, ControlLabel and FormControl.
groupProps	{}	Object	Props passed to FormGroup.
labelColProps	{}	Object	Props passed to <Col componentClass={ControlLabel} />.
labelText	undefined	React$Element	The label of the field. ControlLabel is used for label rendering.
controlColProps	{}	Object	Props passed to Col.
inputGroupProps	{}	Object	Props passed to InputGroup. Valid only when addonBefore or addonAfter is specified.
addonBefore	undefined	React$Element	Specify InputGroup.Addon component.
addonAfter	undefined	React$Element	Specify InputGroup.Addon component.
getValidationState	see	Function	ref: getValidationState

InlineInput

It's <Input /> Component of the inline layout.

Note: For inline layout, no error message is displayed.

Props	Default	Type	Description
id	undefined	string	The ID that you specify for FormGroup.controlId, ControlLabel.htmlFor, and FormControl.id.
bsSize	undefined	string	The size of the FormGroup, ControlLabel and FormControl.
groupProps	{}	Object	Props passed to FormGroup.
labelProps	{}	Object	Props passed to ControlLabel.
labelText	undefined	React$Element	The label of the field. ControlLabel is used for label rendering.
inputGroupProps	{}	Object	Props passed to InputGroup. Valid only when addonBefore or addonAfter is specified.
addonBefore	undefined	React$Element	Specify InputGroup.Addon component.
addonAfter	undefined	React$Element	Specify InputGroup.Addon component.
getValidationState	see	Function	ref: getValidationState

InlineSelect

It's <Select /> Component of the inline layout.

Note: For inline layout, no error message is displayed.

Props	Default	Type	Description
id	undefined	string	The ID that you specify for FormGroup.controlId, ControlLabel.htmlFor, and FormControl.id.
bsSize	undefined	string	The size of the FormGroup, ControlLabel and FormControl.
groupProps	{}	Object	Props passed to FormGroup.
labelProps	{}	Object	Props passed to ControlLabel.
labelText	undefined	React$Element	The label of the field. ControlLabel is used for label rendering.
inputGroupProps	{}	Object	Props passed to InputGroup. Valid only when addonBefore or addonAfter is specified.
addonBefore	undefined	React$Element	Specify InputGroup.Addon component.
addonAfter	undefined	React$Element	Specify InputGroup.Addon component.
getValidationState	see	Function	ref: getValidationState

Input

It's Input Component.

Props	Default	Type	Description
id	undefined	string	The ID that you specify for FormGroup.controlId, ControlLabel.htmlFor, and FormControl.id.
bsSize	undefined	string	The size of the FormGroup, ControlLabel and FormControl.
groupProps	{}	Object	Props passed to FormGroup.
labelProps	{}	Object	Props passed to ControlLabel.
labelText	undefined	React$Element	The label of the field. ControlLabel is used for label rendering.
inputGroupProps	{}	Object	Props passed to InputGroup. Valid only when addonBefore or addonAfter is specified.
addonBefore	undefined	React$Element	Specify InputGroup.Addon component.
addonAfter	undefined	React$Element	Specify InputGroup.Addon component.
getValidationState	see	Function	ref: getValidationState

Radio

It's a Radio Component.

Props	Default	Type	Description
getValidationState	see	Function	ref: getValidationState

Select

It's Select Component.

Props	Default	Type	Description
id	undefined	string	The ID that you specify for FormGroup.controlId, ControlLabel.htmlFor, and FormControl.id.
bsSize	undefined	string	The size of the FormGroup, ControlLabel and FormControl.
groupProps	{}	Object	Props passed to FormGroup.
labelProps	{}	Object	Props passed to ControlLabel.
labelText	undefined	React$Element	The label of the field. ControlLabel is used for label rendering.
inputGroupProps	{}	Object	Props passed to InputGroup. Valid only when addonBefore or addonAfter is specified.
addonBefore	undefined	React$Element	Specify InputGroup.Addon component.
addonAfter	undefined	React$Element	Specify InputGroup.Addon component.
getValidationState	see	Function	ref: getValidationState

Textarea

It's Textarea Component.

Props	Default	Type	Description
id	undefined	string	The ID that you specify for FormGroup.controlId, ControlLabel.htmlFor, and FormControl.id.
bsSize	undefined	string	The size of the FormGroup, ControlLabel and FormControl.
groupProps	{}	Object	Props passed to FormGroup.
labelProps	{}	Object	Props passed to ControlLabel.
labelText	undefined	React$Element	The label of the field. ControlLabel is used for label rendering.
inputGroupProps	{}	Object	Props passed to InputGroup. Valid only when addonBefore or addonAfter is specified.
addonBefore	undefined	React$Element	Specify InputGroup.Addon component.
addonAfter	undefined	React$Element	Specify InputGroup.Addon component.
getValidationState	see	Function	ref: getValidationState

Related projects

• tsuyoshiwada/react-drip-form

Contribute

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request :D

Bugs, feature requests and comments are more than welcome in the issues.

License

MIT © tsuyoshiwada