nkrambo / formsy-semantic-ui-react

Formsy-React wrappers for Semantic-Ui-React's form elements

formsy-semantic-ui-react

Quicky create formsy-react forms with Semantic-Ui-React's Form Components.

Installation

npm install (or yarn add) formsy-semantic-ui-react

You will also need formsy-react

npm install (or yarn add) formsy-react

Usage

// ES6
import {
  Form, Input, TextArea, Checkbox, Radio, RadioGroup, Dropdown, Select,
} from 'formsy-semantic-ui-react';

// ES5
var Form = require('formsy-semantic-ui-react').Form;
/** and so on for the rest of the Components **/

const App = (props) => {
  const errorLabel = <Label color="red" pointing/>

  return (
    <Form
      onValidSubmit={ props.onValidSubmit }
      loading={ props.isLoading }
    >
      <Form.Input
        name="email"
        label="Email"
        validations="isEmail"
        validationErrors={{ isEmail: 'Email not valid' }}
        errorLabel={ errorLabel }
      />
    </Form>
  )
}

Props

This library defines a couple of (non-required) props for more control over behavior/markup:

• errorLabel (type: function default: none)

  Used to Show validation errors next to the inputs. Any children get replaced by getErrorMessage()

  <Checkbox
    errorLabel={ <Label color="red" pointing="left" }/>
  />

• instantValidation (type: bool default: false)

Whether or not to show validation errors as soon as user starts typing. Only available on Input and Form.Input

  <Input
    instantValidation
  />

Examples

Go to the example folder to see more examples of how the components are used. For more information on building and validating formsy-react forms, take a look at Formsy-React's Dcoumentaion

To run the example app:

npm/yarn install
npm/yarn run example-app

Then go to localhost:8080

Tests

Tests are done using Mocha, chai, sinon, and enzyme on jsdom. To run the tests,

npm/yarn install
npm/yarn run test // or npm run test:watch

License: MIT