react-drip-form-components

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

• 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

Changelog

0.0.2

2017-07-27

• Fix spinner vertical position.
• Add snaphot testing.