valle

Help to validate react component easily, functionally and extendable. Powered by Higher-Order Components.

Inspire by

• Presentational and Container Components -- Dan Abramov.
• Mixins Are Dead. Long Live Composition -- Dan Abramov.
• jQuery validation

Feature

• Extendable: You can defined validator through jQuery-validation-like addMethod by yourself
• Easily: Just pass the properties to component to control which validator you want to use
• Functionally: valle use HOC component to wrap component which want to be valided, so you can wrap any component easily.
• Asynchronous: It support asynchronous validator.

Full Example

You can see the simple example on example

import React from 'react';
import ReactDOM from 'react-dom';

import valle from 'valle';

// valle would pass three properties to component
// valid(Boolean): Present component is valid or not
// message(String): Error message if not valid
// validate(Function): Trigger validate. Just pass string value
const Input = ({ validate, message }) => (
  <div>
    <input onChange={e => validate(e.target.value)} />
    <div>{message}</div>
  </div>
);

// User defined validator
valle.addMethod('required', value => value !== '', 'It should have value');

// Use HOC to connect component
const ValidInput = valle.connect(Input);

ReactDOM.render(
  <ValidInput
    required  // Just pass properties to tell valle which validator you want to use
    onValid={value => console.log(`This is valid value: ${value}`)}  // onValid would be called when validate success
    onInvalid={value => console.log(`This is invalid value: ${value}`)}  // onValid would be called when validate falied
  />,
	document.getElementById('content')
);

API

addMethod(name, method, message)

Could define the custom validator

ex.

valle.addMethod('required', value => value !== '', 'It should have value');

Support asynchronous method. ex. ex.

valle.addMethod('required', async value => new Promise(resolve => setTimeout(() => resolve(value !== ''), 500)), 'It should have value');

Arguments

• [name](String): Validator name
• [method(value, property value)](Function): Validator method. it would be called when validate be called. It would catch value(validate function argument) and property value. It could be the asynchronous method and return promise
• [message](String | Function): Validate failed message

addMethods(validators)

Could define the many custom validators at once

ex.

valle.addMethods({
  required: {
    method: value => value !== '',
    message: 'It should have value',
  },
});

Arguments

• [validators](Object): Validators' object, each validator has two key: method and message

Validator object format:

• [method(value, property value)](Function): Validator method. it would be called when validate be called. It would catch value(validate function argument) and property value. It could be the asynchronous method and return promise
• [message](String | Function): Validate failed message

setMessages(validators)

Could override the validators' default message

ex.

valle.addMethods({
  required: 'It would override the required validator\'s message',
});

Arguments

• [Messages](Object): The message object. key is validator's name, value is message which want to override

connect(Component)

Use Higher-Order component to wrap component.

Arguments

• [Component](Component): The Component which want to validate.

templateTemplate Strings

It could use ES6 Template Strings to custom message

ex.

valle.addMethods({
  empty: {
    method: value => value === '',
    message: valle.template`It has value: ${0}`,
  },
});

Template Strings Arguments

• ${0}: The validate value
• ${1}: The property value
• ${key}: If property value is the object, it could use key to read it.

Message method

You could also set message method instead of template string.

ex.

valle.addMethods({
  empty: {
    method: value => value === '',
    message: value => `It has value: ${value}`,
  },
});

Arguments

• [value](Function): Current validate value
• [property value](String): The property value

Todo

• [x] Add default validator. Like required, isEmail, isInt
• [x] Support addMethods to add many validators at onece
• [x] Filter properties key to prevent pass unneccessay properties to child component
• etc...

Contribute

1. Fork it.
2. Create your feature-branch git checkout -b your-new-feature-branch
3. Commit your change git commit -am 'Add new feature'
4. Push to the branch git push origin your-new-feature-branch
5. Create new Pull Request with master branch

License

The MIT License (MIT)

Copyright (c) 2017 Lee < [email protected] >

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.