https://github.com/co2-git/reactors-form
Form components for the Reactors framework.
https://github.com/co2-git/reactors-form
Last synced: about 1 year ago
JSON representation
Form components for the Reactors framework.
- Host: GitHub
- URL: https://github.com/co2-git/reactors-form
- Owner: co2-git
- Created: 2016-06-13T18:20:12.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-20T00:42:31.000Z (over 8 years ago)
- Last Synced: 2025-02-01T16:23:14.928Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 200 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
reactors-form
===
Form components for the [Reactors](https://github.com/co2-git/reactors) framework.
Reactors is a framework based on React to build hybrid apps that run web, mobile and desktop.
# Install
```bash
yarn add react reactors reactors-form
```
# Usage
```javascript
import React, {PureComponent} from 'react';
import {Text, View} from 'reactors';
import {Button, Input, Picker} from 'reactors-form';
const teams = [
{id: 1, name: 'Red'},
{id: 2, name: 'Blue'},
{id: 3, name: 'Green'},
];
class LoginForm extends PureComponent {
state = {
email: null,
error: null,
team: null,
};
render = () => (
{this.state.error && {this.state.error}}
this.setState({email})}
/>
(
{team.name}
)}
onSelect={teamId => this.setState({team: teamId})}
/>
Login
);
submit = () => {
if (!Input.isValid('email')) {
this.setState({error: Input.getErrorMessage('email')});
} else {
this.setState({error: ''}, () => {
this.props.submit(this.state.email, this.state.team);
});
}
};
}
```
# Components
## ``
```javascript
import React, {Component} from 'react';
import {Button} from 'reactors-form';
class MyButton extends Component {
render() {
return (
console.log('Pressed!')}>
Some text or components here ...
);
}
}
```
### `onPress: (event: Event) => void`
A function to be called when user presses button.
### `style: any`
A style that can overwrite button's default style.
## ``
### `confirm: boolean` default `false`
**Only applicable with `password`**. Show a second input to confirm password. If the two passwords do not match, it will fail on validate.
```javascript
```
### `email: boolean` default `false`
It will fail on validate if not a valid email address. You can specify your own regex via `match`.
```javascript
```
### `max: number | Date` default `Infinity`
If it is a text input, it will fail to validate if characters length is greater than `max`.
It it is a number, it will fail to validate if value is greater than `max`.
If it is a date, it will fail to validate if value is after `max`.
```javascript
```
### `min: number | Date` default `Infinity`
If it is a text input, it will fail to validate if characters length is lesser than `min`.
It it is a number, it will fail to validate if value is lesser than `min`.
If it is a date, it will fail to validate if value is before `min`.
```javascript
```
### `onChange: (value: string) => void`
An action called every time the input changes. First argument is input's current value.
### `required: boolean` default `false`
It will fail on validate if value is empty.
```javascript
```
## ``
## ``