Nemo's Parental Misguidance

    react-joi-form-decorator

    1.2.0 • Public • Published

    Build Status npm version

    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.

    Installation

    npm install --save react-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)

    Browser Webpack configuration

    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' }

    React Native configuration

    // @TODO

    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-joi-form-decorator

    DownloadsWeekly Downloads

    0

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    4

    Last publish

    Collaborators

    • antoniogiordano