Skip to content
☕️ Official UI Components for react-drip-form. styling by styled-components.
JavaScript
Branch: master
Clone or download
tsuyoshiwada
tsuyoshiwada Release 0.0.2
Latest commit 794feff Jul 26, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Update demo page Jul 26, 2017
src Add snapshot testing Jul 26, 2017
.babelrc Fix HMR in demo pagce Jul 18, 2017
.editorconfig Initial commit Jul 5, 2017
.eslintignore Initial commit Jul 5, 2017
.eslintrc Initial commit Jul 5, 2017
.flowconfig Initial commit Jul 5, 2017
.gitignore Initial commit Jul 5, 2017
.travis.yml Initial commit Jul 5, 2017
CHANGELOG.md Update changelog Jul 26, 2017
LICENSE Initial commit Jul 5, 2017
README.md Update docs Jul 6, 2017
package.json Release 0.0.2 Jul 26, 2017
yarn.lock Update devDependencies Jul 26, 2017

README.md

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 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

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

You can’t perform that action at this time.