Quicky create formsy-react forms with Semantic-Ui-React's Form Components.
npm install (or yarn add) formsy-semantic-ui-react
You will also need formsy-react
npm install (or yarn add) formsy-react
// 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>
)
}
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
/>
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 Documentation
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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4