Namespace Pollution Mechanism

    react-native-joi-form-decorator

    0.3.5 • Public • Published

    Build Status npm version

    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

    Keywords

    none

    Install

    npm i react-native-joi-form-decorator

    DownloadsWeekly Downloads

    0

    Version

    0.3.5

    License

    MIT

    Last publish

    Collaborators

    • antoniogiordano