React Native Joi Form Decorator
A decorator for your forms validated through Joi from Hapi.js. Build you form, decorate it with React Native Joi Form Decorator providing a valid Joi object prop.
Installation
npm install --save react-native-joi-form-decorator
How does it work?
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.
The render method provides 2 outputs, an isValid
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
error
is a string explaining why data is wrong (in English! Localization is not supported yet)
React Native configuration
You should install react-native-joi since it is used as an external dependency
npm install --save react-native-joi
Browser configuration
Please refer to react-joi-form-decorator
Basic Usage
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 (
<Validator data={data} joiObject={Joi.object().keys({name: Joi.string().min(5).required()})}>
{(isValid, validations) => (
<div>
<label>Your name:</label>
<input type="text" name="name" value={data.name} onChange={() => {
// an update state function
}} />
{
validations.name.state === validationStates.WRONG && <label>{validations.name.error}</label>
}
<button type="submit" disabled={!isValid}>Submit</button>
</div>
)}
</Validator>
)
}
}
More power!
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 (
<Attire initial={{name: 'Frankie Frankson'}}>
{(data, onChange, reset) => (
<Validator data={data} joiObject={Joi.object().keys({name: Joi.string().min(5).required()})}>
{(isValid, validations) => (
<div>
<label>Your name:</label>
<input type="text" name="name" value={data.name} onChange={() => {
// an update state function
}} />
{
validations.name.state === validationStates.WRONG && <label>{validations.name.error}</label>
}
<button onClick={reset}>Reset my name!</button>
<button type="submit" disabled={!isValid}>Submit</button>
</div>
)}
</Validator>
)}
</Attire>
)
}
}
Contributing
If you see something you don't like or think that something is broken, please open an issue or better yet, make a PR!
License
MIT