React Bootstrap component set for react-drip-form.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
src
.babelrc
.editorconfig
.eslintignore
.eslintrc
.flowconfig
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
yarn.lock

README.md

react-drip-form-bootstrap

Build Status Codecov npm version

React Bootstrap component set for react-drip-form.

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

Table Of Contents

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

Contribute

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

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

License

MIT © tsuyoshiwada