wrap-component-with-valour
Wrap a component with client side validation functionality using the Valour library
Last updated 4 years ago by jacobrios .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install wrap-component-with-valour 
SYNC missed versions from official npm registry.

Wrap Component With Valour

wrapComponentWithValour is a function that takes a React component and returns a component with added client side validation using the valour library.

Props

Passing a component definition to wrapComponentWithValour will provide additional props to the newly defined component function:

  • formName * required

    The name of the form that is registered with valour. If the formName already exists, the rules and valueName will be added to the current form definition within valour.

  • valueName * required

    The name of the value being registered within the valour form

  • rules * required

    An object that defines the rules for a given value within a form.

  • shouldRenderValidationState - Defaults to true

    Should the component render validation state. This is useful for allowing parent components to control validation for each of it's child components.

  • onValidationStateChanged - Defaults to noop

    A function that will get run after validation has been run. It takes three parameters: valueName, value, and isValid.

Usage

SimpleText.js

import React from 'react';
import wrapComponentWithValour from 'wrap-component-with-valour';

function SimpleText({
 isValid = true,
 shouldRenderAsInvalid = true,
 valueName,
 value,
 labelText,
 onValueUpdated
}) {
 function handleTextChanged(event) {
   const newText = event.target.value;
   onValueUpdated(valueName, newText);
 }

 const labelClass = !isValid && shouldRenderAsInvalid ? 'error' : '';
 return (
   <label className={labelClass}>
     {labelText}
     <input
       type="text"
       onChange={handleTextChanged}
       defaultValue={value}
       name={valueName}
     />
   </label>
 );
}

export const ValidatedText = wrapComponentWithValour(SimpleText);

MyApp.js

import React from 'react';
import valour from 'valour';
import { ValidatedSimpleText } from './SimpleText';

function MyApp() {
  const rules = {
    firstName: valour.rules.isRequired().validatedBy(x => x.length > 3)
  };

  function handleValidationStateChange(valueName, value, isValid) {
    console.log(`${value} is a valid value for ${valueName}? ${isValid}`);
  }

  return (
    <ValidatedText
      formName="MyForm"
      valueName="firstName"
      rules={rules}
      labelText="First Name"
      onValidationStateChanged={handleValidationStateChange}
    />
  );
}

Current Tags

  • 2.0.0                                ...           latest (4 years ago)

5 Versions

  • 2.0.0                                ...           4 years ago
  • 1.2.0                                ...           4 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.2                                ...           4 years ago
  • 1.0.1                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 7
Last Day 0
Last Week 5
Last Month 1
Dependencies (3)
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |