https://github.com/stackedq/reformact
React form component using state.
https://github.com/stackedq/reformact
react react-form-validation react-forms
Last synced: 11 days ago
JSON representation
React form component using state.
- Host: GitHub
- URL: https://github.com/stackedq/reformact
- Owner: stackedq
- License: mit
- Created: 2018-05-03T20:16:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T02:52:08.000Z (about 3 years ago)
- Last Synced: 2024-04-25T15:21:03.890Z (over 1 year ago)
- Topics: react, react-form-validation, react-forms
- Language: JavaScript
- Size: 716 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Reformact
A react form component that uses state.
built with react for react with <3
## Getting Started
These instructions will help you use this package,
alright, let's get down to business.
### installing
Run this command in a terminal to install with npm:
`npm i reformact -S`
## Usage
import reformact in your application as follows:
`import Form from 'reformact';`
Reformact gets an array of fields and render them based on them type; for example a minimal login form would be like:
```
class LoginForm extends Component {
submit = (values) => {
const {username, password} = values //
this.props.apiLogin(username, password)
}
render() {
return ( this.submit(values)} submitText='Login'/>)
}
}
```
this will generate a form with two inputs named username and password and a submit button as shown below.
this `Form` has an `onSubmit` attribute that gets fired when the form is submitted either with click or enter/return key and gets field values.
the `submitText` is the title of submit button.
## Supported field types
Currently reformact supports `text`, `number`, `password`, `textarea`, `select`, `checkbox` and `radio` inputs, but will support lots of inputs soon.
## Field attributes
The following table showing attributes.
Field type `*` means all types field.
| Attributes | Field type | value | description |
| - | - | - | - |
| required | `*` | boolean`(default=false)` | check if field has a value if set true. |
| requiredPhrase | `*` | string`(default=This field is required.)` | error shown when field is required and empty. |
| name | `*` | string | a unique string in form, on submitting the form you can access a field value by values.`` |
| placeholder | `*` | string`(default=null)` | inputs placeholder. |
| defaultValue | `*` | any`(default=null)` | in case of editing forms pass current values via `defaultValue`. |
| maxLength | `text`, `textarea`, `number` and `password` | number`(default=null)` | maximum value length. |
| maxLengthErrorPhrase | `text`, `textarea`, `number` and `password` | string`(default=This field accepts characters.)` | error shown when maxLength is crossed. |
| multiSelect | `select`| boolean`(default=false)` | set true if select can have more than one values. |
| selectHandle | `select` | component`(default=an ungly css-made triangle)`, example: `