formsy-semantic-ui-react

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: Node 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. To run the example app:

npm/yarn install
npm/yarn run example-app

Then go to localhost:8080

For more information on building and validating formsy-react forms, take a look at Formsy-React's Dcoumentaion

Tests

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

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

License: MIT

Changelog

v2.2.0

9 November 2022

• Bump shelljs from 0.8.4 to 0.8.5 #124
• Bump minimist from 1.2.5 to 1.2.7 #123
• Bump tmpl from 1.0.4 to 1.0.5 #122
• Migrate to React testing lib #121
• Bump terser from 4.8.0 to 4.8.1 #120
• Bump minimist from 1.2.5 to 1.2.6 #119
• Bump node-fetch from 2.6.1 to 2.6.7 #118
• Bump lodash-es from 4.17.20 to 4.17.21 #117
• Bump minimist from 1.2.5 to 1.2.6 in /example #116
• Bump shelljs from 0.8.4 to 0.8.5 #115
• Bump tmpl from 1.0.4 to 1.0.5 #114
• Update ci deps 41e4d29
• Bump deps 2e63e13
• fix: Don't pass label prop to Semantic-ui components 343bbc0