A Joi validator for decorating your React forms
npm install react-joi-form-decorator
A decorator for your forms validated through Joi from Hapi.js.
Build you form, decorate it with React Joi Form Decorator providing a valid Joi object prop.
``
npm install --save react-joi-form-decorator
Import component and validationsStates enum first
import { Validator, validationStates } from 'react-joi-form-decorator'
The Validator component takes 2 props, a data object and a joiObject which represents the Joi validation object. isValid
The render method provides 2 outputs, an flag and a validations data object, where each key of this object is a key from the provided data object, and the value is anobject with a state and error parameters.state
could be one of validationStates.CORRECT, validationStates.WRONG, validationStates.EMPTY
is a string explaining why data is wrong (in English! Localization is not supported yet)
$3
react-joi-form-decorator looks for a joi generic module.
Since joi original module is for server side purpose, you have to create an alias for browser and React Native environments.
Add to your webpack.config file this:
resolve: {
extensions: ['.js', '.jsx', '.json'],
modules: ['node_modules'],
alias: {
joi: 'joi-browser'
}
// @TODO
Here's a simple example:
`
import React from 'react'
import { Validator, validationStates } from 'react-joi-form-decorator'
import Joi from 'joi'
class MyForm extends React.Component {
constructor (props) {
super (props)
this.state = {
data: {
name: 'Frankie Frankson'
}
}
}
render() {
const { data } = this.state
return (
{(isValid, validations) => (
{
// an update state function
}} />
{
validations.name.state === validationStates.WRONG &&
}
)}
)
}
}
`
react-joi-form-decorator works great with react-attire!
Here's an other example:
`
import React from 'react'
import { Attire } from 'react-attire'
import { Validator, validationStates } from 'react-joi-form-decorator'
class MyForm extends React.Component {
render() {
return (
{(data, onChange, reset) => (
{(isValid, validations) => (
{
// an update state function
}} />
{
validations.name.state === validationStates.WRONG &&
}
)}
)}
)
}
}
``
If you see something you don't like or think that something is broken, please open an issue or better yet, make a PR!
MIT