react-validated-component
v0.0.4
Published
Adds validation capabilities to children components
Downloads
7
Readme
react-validated-component
Usage
import { createValidatedComponent } from 'react-validated-component'
...
// Dummy react component
class priceInput extends React.Component {
constructor(props) {
super(props)
this.setStateAndValidate = this.setStateAndValidate.bind(this)
}
setStateAndValidate(state) {
let keyToValidate = Object.keys(state)[0]
// Calls the validate method from react-validated-component
this.props.validate(keyToValidate, state[keyToValidate], this.state)
this.setState({
[keyToValidate]: state[keyToValidate]
})
}
render() {
// this.props.isValid contains the valid state of the input (injected through react-validated-component)
return <input onChange={(ev) => this.setStateAndValidate({ price: ev.target.value })} />
}
}
const ValidatedComponent = createValidatedComponent(priceInput)
const validators = {
price: { name: 'presence' } // This automatically checks for not empty input,
phoneNumber: [
{ name: 'presence' },
{
name: 'length',
maxLength: 9,
disabled: (key, value, state) => {
if (state.isValidating) {
return false
}
return true
}
}, // Also an included validator
{ validate: (value, key, state) => { /* define a custom validation inside */ } }
]
}
// Now we can use ValidatedComponent like this:
// <ValidatedComponent validators={validators} />
// Or through react-redux's connect
// Example:
// and returning validators as a prop in mapStateToProps
const mapStateToProps = () => ({ validators })
connect(mapStateToProps)(createValidatedComponent(priceInput))