https://github.com/smacker/valya-forms
Wrapper for valya to make forms easier
https://github.com/smacker/valya-forms
Last synced: 10 months ago
JSON representation
Wrapper for valya to make forms easier
- Host: GitHub
- URL: https://github.com/smacker/valya-forms
- Owner: smacker
- Created: 2016-01-25T05:25:48.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-02-16T05:45:17.000Z (over 10 years ago)
- Last Synced: 2025-08-17T04:37:45.858Z (10 months ago)
- Language: JavaScript
- Size: 11.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Valya Forms
Valya Forms are just a tiny Higher-Order Components for [Valya](https://github.com/deepsweet/valya).
It provides props `isValid` and `isValidating` for wrapped component according to states of validators.
Also it allows set `initialValidation` in form for all validators of this form.
### Example
First we need to create valya validator and return it in wrapper:
```js
import { Component } from 'react';
import { ValidatorWrapper } from 'valya-forms';
import Valya from 'valya';
class Validator extends Component {
renderError() {
const { shouldValidate, isValid } = this.props;
if (!shouldValidate || isValid) {
return null;
}
return
{this.props.validationMessage};
}
render() {
return (
{this.props.children}
{this.renderError()}
);
}
}
// This is only change
// We export not Valya(Validator) but ValidatorWrapper(Valya(Validator))
export default ValidatorWrapper(Valya(Validator));
```
Then we create form and wrap it too:
```js
import { Component } from 'react';
import { FormWrapper } from 'valya-forms';
import Validator from './validator';
// simple react form component
class MyForm extends Component {
constructor(props, context) {
super(props, context);
this.state = {
email: props.email
};
this._onEmailChange = this._onEmailChange.bind(this);
}
_onEmailChange = (e) => {
this.setState({
email: e.target.value
});
};
render() {
// injected props by wrapper
let { isValid, isValidating } = this.props;
return (
{/* prop initialValidation will be passed to all validators */}
{/* name & value props are required
they will be passed to valya and underlying component */}
{isValidating ? 'processing validation' : 'validation finished'}
Form is {isValid ? 'valid' : 'invalid'}
);
}
}
// export form in wrapper
export default FormWrapper(MyForm);
```