☕️ Material-UI 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-material-ui

Build Status Codecov npm version

Material-UI component set for react-drip-form.

https://tsuyoshiwada.github.io/react-drip-form-material-ui/

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

Usage

import React from 'react';
import { dripForm } from 'react-drip-form';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';
import {
  AutoComplete,
  Checkbox,
  DatePicker,
  FieldGroup,
  RadioButton,
  SelectField,
  Slider,
  TextField,
  TimePicker,
  Toggle,
} from 'react-drip-form-material-ui';


export default dripForm({/* form options */})(({ handlers }) => (
  <form onSubmit={handlers.onSubmit}>
    {/* TextField */}
    <TextField
      name="title"
      label="Title"
      floatingLabelText="Title"
      hintText="Enter title"
    />

    {/* TextField (multi line) */}
    <TextField
      name="description"
      label="Description"
      multiLine
      rows={4}
      rowsMax={10}
      floatingLabelText="Description"
      hintText="Enter a description"
    />

    {/* Select field */}
    <SelectField
      name="library"
      label="Library"
      floatingLabelText="Library"
    >
      <MenuItem value="react" primaryText="React" />
      <MenuItem value="angular" primaryText="Angular" />
      <MenuItem value="vue" primaryText="Vue" />
    </SelectField>

    {/* Checkbox with FieldGroup field */}
    <FieldGroup
      multiple
      name="category"
      label="Category"
    >
      <Checkbox value="cat1" labelText="Category 1" />
      <Checkbox value="cat2" labelText="Category 2" />
      <Checkbox value="cat3" labelText="Category 3" />
    </FieldGroup>

    {/* Radio with FieldGroup field (default value = 'private') */}
    <FieldGroup
      name="status"
      label="Status"
      value="private"
    >
      <RadioButton value="private" labelText="Private" />
      <RadioButton value="public" labelText="Public" />
      <RadioButton value="draft" labelText="Draft" />
    </FieldGroup>

    {/* Date Picker */}
    <DatePicker
      name="releaseDate"
      label="Release Date"
      floatingLabelText="Release Date"
      hintText="Select release date"
    />

    {/* Time Picker */}
    <TimePicker
      name="releaseTime"
      label="Release Time"
      floatingLabelText="Release Time"
      hintText="Select release time"
    />

    {/* Slider */}
    <Slider
      name="rating"
      label="Rating"
      min={0}
      max={100}
      step={1}
    />

    {/* Toggle */}
    <Toggle
      name="confirm"
      value="yes"
      label="Confirm"
      labelText="I agree to the Terms of Use"
      labelPosition="right"
    />

    <RaisedButton
      primary
      label="Submit"
      onClick={handlers.onSubmit}
    />
  </form>
));

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

API

Almost the Material-UI API can be used as it is except that name prop is mandatory.
I will explain the differences from the Material-UI API here.

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)

Change label to labelText

In react-drip-form, label is a property with special meaning.
Therefore, rename the label attribute that can be specified with <Toggle /> etc. to labelText.

<Toggle
  name="confirm"
  value="yes"
  label="Confirm"
  labelText="I agree to the Terms of Use"
  labelPosition="right"
/>

errorLabelStyle

The following components control error labels by react-drip-form-material-ui.
You must use errorLabelStyle to customize the style of error labels.

  • <Checkbox />
  • <DatePicker />
  • <FieldGroup />
  • <RadioButton />
  • <Slider />
  • <TimePicker />
  • <Toggle />
<DatePicker
  name="releaseDate"
  errorLabelStyle={{
    // your custom style
    color: 'hotpink',
  }}
/>

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