valya v0.2.1

Valya is just a tiny Higher-Order Component for validation in React that can be used as an ES7 decorator.

Install

npm i -S valya

Example

Creating Validator

import React from 'react';
import Valya from 'valya';

@Valya
class Validator extends React.Component {
    static displayName = 'Validator';

    _renderError() {
        if (!this.props.enabled || this.props.isValid) {
            return null;
        }

        return (
            <span className="validator__error" key="error">
                {this.props.validationErrorMessage}
            </span>
        );
    }

    render () {
        return (
            <span className="validator">
                <span className="validator__target" key="target">
                    {this.props.children}
                </span>
                {this._renderError()}
            </span>
        );
    }
}

Your Validator will receive the following "special" props:

• enabled
• initialValidation
• isValidating
• isValid
• validationErrorMessage

Usage

_onInputChange(e) {
    this.setState({
        value: e.target.value
    });
}

render () {
    return (
        <Validator
            value={this.state.value}
            onStart={() => {
                console.log('Validation start');
            }}
            onEnd={(isValid, message) => {
                console.log('validation end:', isValid, message);
            }}
            validators={[
                {
                    validator(value, params) {
                        if (value) {
                            return Promise.resolve();
                        }

                        return Promise.reject(params.message);
                    },
                    params: {
                        message: 'Field is required'
                    }
                }
            ]}>
            <div>
                <input type="text" value={this.state.value} onChange={::this._onInputChange} />
            </div>
        </Validator>
    );
}

You can pass the following props:

• enabled <boolean> – control whether Valya should be enabled (true by default)
• initialValidation <boolean> – control whether Valya should validate first right in constructor (false by default)
• silentInitValidation <boolean> – control once validation in constructor without changing state and send result to onEnd callback (false by default)
• value <any> – current target's value to validate
• onStart <Function> – "on validation start" callback
• onEnd <Function> – "on validation end" callback
• validators <Array> – array of "validators": every validator is just a function that must return a promise, so Valya doesn't really cares about what is happening inside.