formsy-blueprintjs

This library is a wrapper for BlueprintJS form components to allow them to be used with formsy-react, a form validation component for React forms.

Installation

To and install formsy-blueprintjs and add it to your package.json, run:

$ npm install --save formsy-blueprintjs

You will also need to add formsy-react if not already installed:

$ npm install --save formsy-react

Usage

The package should work just fine, but it's largly untested and there could be bugs. Feel free to contribute and submit PR's.

ES6 Imports

import FormsyCheckbox from 'formsy-blueprintjs/lib/formsyCheckbox';
import FormsyDateInput from 'formsy-blueprintjs/lib/formsyDateInput';
import FormsyDateInputPicker from 'formsy-blueprintjs/lib/formsyDateInputPicker';
import FormsySelect from 'formsy-blueprintjs/lib/formsySelectField';
import FormsyRadioGroup from 'formsy-blueprintjs/lib/formsyRadioGroup';
import FormsyText from 'formsy-blueprintjs/lib/formsyTextField';
import FormsySwitch from 'formsy-blueprintjs/lib/formsySwitch';

Examples

Short examples on how it can be used.

Checkbox

<FormsyCheckbox required name='isAdmin' label='Administrator' />

Date Input

<FormsyDateInput required name='expireDate' label='Expire Date' />

Selects

const movies = [{title: 'Gladiator', value: 0}, {title: 'The Matrix', value: 1}];
 
<FormsySelect required initialValue={0} name='movieId' label='Movies'>
  {movies}
</FormsySelect>

Radio Groups

const movies = [{title: 'Gladiator', value: 0}, {title: 'The Matrix', value: 1}];
 
<FormsyRadioGroup required initialValue={1337} name='movieId' label='Movies'>
  {movies}
</FormsyRadioGroup>

Text Field Input

<FormsyText required name='email' validations='isEmail' validationError='This is not an email' placeholder='Example; test@test.com' label='Email' />

Switch

<FormsySwitch required name='updateMovies' label='Update Movies' />

Available Props

Most of these components share props, these are available.

Common Props
  label:            string    The label/text of the component.
  inline:           bool      Controls if the input should be inline, or not.
  fill:             bool      The component tries to fill it's parent width.
  disabled:         bool      Controls if the component is disabled or not.
  name:             string    Used by formsy-react.
  value:            varies    For an controlled component.

FormsyCheckbox
  initialValue:     string    Controls if the checkbox is checked by default.

FormsyDateInput
  initialValue:     string    The default value of the component, should be a valid date.
  placeholder:      string    The placeholder text or value.
  maxDate:          string    The maxdate available for selection, should be a valid date.
  minDate:          string    The maxdate available for selection, should be a valid date.

FormsySelect
  initialValue:     number    The initial selected option in the select input.
  placeholder:      string    The placeholder text or value.
  leftIconName:     string    A valid BlueprintJS icon name.

FormsyRadioGroup
  initialValue:     number    The initial selected option in the radio group.
  placeholder:      string    The placeholder text or value.
  leftIconName:     string    A valid BlueprintJS icon name.
  style:            object

FormsyText
  initialValue:     number    The initial text of the component.
  type:             string    The input type, for example 'text' or 'password'.
  placeholder:      string    The placeholder text or value.
  leftIconName:     string    A valid BlueprintJS icon name.
  rightElement:     element   A valid component to display, for example an <Button />
  inputRef:         element 

FormsySwitch
  initialValue:     string    Controls if the switch is checked by default.

Known Issues

See issues.

Release History

See CHANGELOG.md

Acknowledgements

Based on Formsy-Material-UI.

Contribute

Yes please. :)

npm