https://github.com/zabute/formsy-semantic-ui-react
Formsy-React wrappers for Semantic-Ui-React's form components
https://github.com/zabute/formsy-semantic-ui-react
form form-validation formsy formsy-react react semantic-ui semantic-ui-react
Last synced: 3 months ago
JSON representation
Formsy-React wrappers for Semantic-Ui-React's form components
- Host: GitHub
- URL: https://github.com/zabute/formsy-semantic-ui-react
- Owner: zabute
- License: mit
- Created: 2017-01-12T18:57:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-24T08:25:24.000Z (about 1 year ago)
- Last Synced: 2024-05-02T01:51:04.517Z (about 1 year ago)
- Topics: form, form-validation, formsy, formsy-react, react, semantic-ui, semantic-ui-react
- Language: TypeScript
- Homepage:
- Size: 3.25 MB
- Stars: 102
- Watchers: 11
- Forks: 27
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# formsy-semantic-ui-react  [](https://badge.fury.io/js/formsy-semantic-ui-react)
Quicky create [formsy-react](https://github.com/formsy/formsy-react) forms with [Semantic-Ui-React's](https://github.com/Semantic-Org/Semantic-UI-React) 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
```jsx
// ES6
import {
Form, Input, TextArea, Checkbox, Radio, RadioGroup, Dropdown, Select,
} from 'formsy-semantic-ui-react';
```
```jsx
// ES5
var Form = require('formsy-semantic-ui-react').Form;
/** and so on for the rest of the Components **/
```
```jsx
const App = (props) => {
const errorLabel =
return (
)
}
```
## 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()```
```jsx
}/>
/>
```
- ```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```
```jsx
```
## Examples
Go to the [example](/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](https://github.com/formsy/formsy-react/blob/master/API.md)
## 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](/LICENSE)