react-drip-form-components

Official UI Components for react-drip-form. styling by styled-components.

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

Table of Contents

• DEMO
• Getting Started
  • Installation
  • Usage
• API
  • shouldDisplayError
  • shouldDisplaySpinner
  • Checkbox
  • Input
  • Radio
  • Select
  • Textarea
  • FieldGroup
• Customize Theme
• Related projects
• Contribute
• License

DEMO

See Live Demo.

Getting Started

Installation

react-drip-form must also be installed.

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

Usage

import React from 'react';
import { dripForm } from 'react-drip-form';
import {
  Checkbox,
  FieldGroup,
  Input,
  Radio,
  Select,
  Textarea,
} from 'react-drip-form-components';

export default dripForm({/* form options */})(({ handlers }) => (
  <form onSubmit={handlers.onSubmit}>
    {/* Input field */}
    <Input name="username" type="text" />

    {/* Select field */}
    <Select name="color">
      <option value="#fff">White</option>
      <option value="#ccc">Gray</option>
      <option value="#000">Black</option>
    </Select>

    {/* Checkbox with FieldGroup field */}
    <FieldGroup name="library" multiple>
      <Checkbox value="react">React</Checkbox>
      <Checkbox value="angular">Angular</Checkbox>
      <Checkbox value="vue">Vue</Checkbox>
    </FieldGroup>

    {/* Radio with FieldGroup field */}
    <FieldGroup name="gender">
      <Radio name="female">Female</Radio>
      <Radio name="male">Male</Radio>
      <Radio name="other">Other</Radio>
    </FieldGroup>

    {/* Textarea field */}
    <Textarea name="message" />

    {/* Checkbox only */}
    <Checkbox name="confirm" value="yes">
      I agree to the <a href="/foo/bar/">Terms of Use</a>
    </Checkbox>

    <button type="submit" onClick={handlers.onSubmit}>Submit</button>
  </form>
));

For actual use, demo/components/SampleForm.js source code may be helpful!

API

The APIs listed below are proprietary properties other than the field properties of react-drip-form.
Please refer to the document for react-drip-form field properties.

shouldDisplayError

This function accepts the properties of the field and makes a decision whether to display an error.
If you want to display an error you need to return true.

By default the following code is used.

({ meta }) => !!(meta.error && meta.dirty && meta.touched)

shouldDisplaySpinner

This function determines the display of the spinner used for asynchronous verification and so on.
If you want to display a spinner you need to return true.

By default the following code is used.

({ meta }) => meta.validating

Checkbox

It is a component that wraps type="checkbox" with dripFormField().

| key | description | |:-----------------------|:---------------------------------------------------| | children | Child element to display on label. | | disabled | Specify whether the field is disabled. | | shouldDisplayError | ref: shouldDisplayError | | shouldDisplaySpinner | ref: shouldDisplaySpinner |

Input

It is a component that wraps input with dripFormField(). mainly used for text control.

| key | description | |:-----------------------|:-----------------------------------------------------------------------------------| | type | Specify an InputType other than checkbox and radio. (Text or email etc...) | | disabled | Specify whether the field is disabled. | | shouldDisplayError | ref: shouldDisplayError | | shouldDisplaySpinner | ref: shouldDisplaySpinner |

Radio

It is a component that wraps type="radio" with dripFormField().

| key | description | |:-----------------------|:---------------------------------------------------| | children | Child element to display on label. | | disabled | Specify whether the field is disabled. | | shouldDisplayError | ref: shouldDisplayError | | shouldDisplaySpinner | ref: shouldDisplaySpinner |

Select

It is a component that wraps select with dripFormField().

| key | description | |:-----------------------|:------------------------------------------------------------------------------| | children | Specify the <option> element. | | multiple | Whether multiple selection is enabled or not. Specify true if it is enable. | | disabled | Specify whether the field is disabled. | | shouldDisplayError | ref: shouldDisplayError | | shouldDisplaySpinner | ref: shouldDisplaySpinner |

Textarea

It is a component that wraps textarea with dripFormField().

| key | description | |:-----------------------|:---------------------------------------------------| | disabled | Specify whether the field is disabled. | | shouldDisplayError | ref: shouldDisplayError | | shouldDisplaySpinner | ref: shouldDisplaySpinner |

FieldGroup

It is a component wrapped in dripFormGroup().

| key | description | |:---------------------|:-----------------------------------------------| | children | Specify the enclosing child element. | | shouldDisplayError | ref: shouldDisplayError |

Customize Theme

You can customize the theme by using extendTheme as follows.

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { extendTheme } from 'react-drip-form-components';

const originalTheme = {
  /* ... Your theme variables */

  // The `rdf` namespace is the theme of `react-drip-form`.
  rdf: extendTheme({
    /* Specify a custom theme here */
  }),
};

export default () => (
  <ThemeProvider theme={originalTheme}>
    {/* Here is your components. */}
  </ThemeProvider>
);

See src/theme.js for customizable variables.

Related projects

• tsuyoshiwada/react-drip-form

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