react-drip-form-components

0.0.2 • Public • Published

react-drip-form-components

Build Status Codecov npm version

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

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

Table of Contents

DEMO

Screenshot

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 andradio. (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

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

Package Sidebar

Install

npm i react-drip-form-components

Weekly Downloads

5

Version

0.0.2

License

MIT

Last publish

Collaborators

  • wadackel