react-form-validation-context

A lightweight react form validation library that uses HOCs (higher order components) for functional programming, with typescript support.

![Build Status](https://travis-ci.org/dave-nicholas/react-form-validation-context)

$3

StackBlitz Example

Installation

``yarn add react-form-validation-context`

Or

`npm install --save react-form-validation-context`

`Usage`

`$3`

`javascript import { Form, withForm, validators, withFormButton, FormErrors // Optional, for custom errors } from "react-form-validation-context";`

`Using the higher order components`

`$3`

withFormis a higher order component that can wrap any kind of user input. Below are some examples of how to create some form connected components

#### Text inputs

Javascript

`javascript const Input = withForm(({ value, onChange, error, showErrors }) => (


     onChange(v)} value={value} />
    {showErrors && error && {error}}

));


Typescript

`javascript export const InputComponent: React.SFC = ({ value, onChange, error, showErrors }: any) => (


    
    {showErrors && error && {error}}

);

const Input = withForm(InputComponent);`

#### Select options

Javascript

`javascript const Dropdown = withForm( ({ value, onChange, error, showErrors, options}) => (


      
      {showErrors && error && {error}}


  )
);


Typescript

`javascript export const DropdownComponent: React.SFC = ({ value, onChange, error, showErrors, options }: any) => (


    
    {showErrors && error && {error}}

);

const Dropdown = withForm(DropdownComponent);`

#### Radio buttons

Javascript

`javascript const Radios = withForm( ({ value, onChange, error, showErrors, options, id }) => (


      {options.map(({ label, val }) => (
        
                      type="radio"
            onChange={() => onChange(val)}
            name={id}
            checked={value === val}
          />
           onChange(val)} htmlFor={id}>
            {label}
          
        
      ))}
      {showErrors && error && {error}}


  )
);

`javascript export const RadioComponent: React.SFC = ({ value, onChange, error, showErrors, options, id }: any) => (


    {options.map(({ label, val }: { label: string; val: string }) => {
      const handleChange = () => onChange(val);
      return (
        
                      type="radio"
            onChange={handleChange}
            name={id}
            checked={value === val}
          />
          
            {label}
          
        
      );
    })}
    {showErrors && error && {error}}

);

const Radios = withForm(RadioComponent);`

`$3`

withFormButton is a higher order component that can a submit or action button

Javascript

`javascript const Button = withFormButton(({ children, ...rest }) => ( ));`

Typescript

`javascript const ButtonComponent: React.SFC = ({ children, ...rest }) => ( );

const Button = withFormButton(ButtonComponent);`

`Errors`

`$3`

Errors will be passed to the components by default. To suppress inline errors you can add the prophideErrors.

For example:

`Javascript`

`$3`

You can use the FormErrors component to display errors for specific components or for all errors on the form.

`javascript // will display all form errors

// to style errors you may pass props to parent container

// display errors for a single component

// display errors for multiple components

// use a custom renderer render={(error, idOfInputWithError) => ( {error} )} />`

`Implementation`

`$3`

validators contain a set of validators for performing input validations

validators.requiredWithMessagevalidators.requiredvalidators.emailvalidators.maxLengthvalidators.minLengthvalidators.exactLengthvalidators.minValuevalidators.maxValuevalidators.maxFloatValuevalidators.decimalWithDotvalidators.numbervalidators.decimalWithCommaDotvalidators.nationalInsurancevalidators.alphaNumeric2WithMessagevalidators.alphaNumeric2validators.onlyAlphaNumericvalidators.addressvalidators.postcodevalidators.allowedValuesvalidators.stringMatchvalidators.passwordStrength

`$3`

`javascript class App extends Component { state = { name: "", email: "" };

submit() { console.log(this.state); }

render() { return (


        
          
                      id="name"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
            validations={[validators.requiredWithMessage('Please enter a name'), validators.maxLength(20)]}
          />
                      id="email"
            value={this.state.email}
            onChange={e => this.setState({ email: e.target.value })}
            validations={[validators.required, validators.email]}
          />
                      id="age"
            value={this.state.age}
            onChange={e => this.setState({ age: e.target.value })}
            options={[
              { label: "one", val: 1 },
              { label: "ten", val: 10 },
              { label: "twenty", val: 20 },
              { label: "thirty", val: 30 }
            ]}
            validations={[validators.required, validators.minValue(15)]}
          />
                      id="status"
            value={this.state.status}
            onChange={status => this.setState({ status })}
            options={[
              { label: "alive", val: "alive" },
              { label: "dead", val: "dead" },
              { label: "on holiday", val: "on holiday" }
            ]}
            validations={[
              validators.requiredWithMessage("What is your status?")
            ]}
          />


    );
  }
}

$3

Dave Nicholas, Martin Carder, Ekta Wadhwani, Mariana Nicholas

react-form-validation-context

A lightweight react form validation library that uses HOCs (higher order components) for functional programming, with typescript support.

![Build Status](https://travis-ci.org/dave-nicholas/react-form-validation-context)

$3

StackBlitz Example

Installation

``yarn add react-form-validation-context`

Or

`npm install --save react-form-validation-context`

`Usage`

`$3`

`javascript import { Form, withForm, validators, withFormButton, FormErrors // Optional, for custom errors } from "react-form-validation-context";`

`Using the higher order components`

`$3`

withFormis a higher order component that can wrap any kind of user input. Below are some examples of how to create some form connected components

#### Text inputs

Javascript

`javascript const Input = withForm(({ value, onChange, error, showErrors }) => (


     onChange(v)} value={value} />
    {showErrors && error && {error}}

));


Typescript

`javascript export const InputComponent: React.SFC = ({ value, onChange, error, showErrors }: any) => (


    
    {showErrors && error && {error}}

);

const Input = withForm(InputComponent);`

#### Select options

Javascript

`javascript const Dropdown = withForm( ({ value, onChange, error, showErrors, options}) => (


      
      {showErrors && error && {error}}


  )
);


Typescript

`javascript export const DropdownComponent: React.SFC = ({ value, onChange, error, showErrors, options }: any) => (


    
    {showErrors && error && {error}}

);

const Dropdown = withForm(DropdownComponent);`

#### Radio buttons

Javascript

`javascript const Radios = withForm( ({ value, onChange, error, showErrors, options, id }) => (


      {options.map(({ label, val }) => (
        
                      type="radio"
            onChange={() => onChange(val)}
            name={id}
            checked={value === val}
          />
           onChange(val)} htmlFor={id}>
            {label}
          
        
      ))}
      {showErrors && error && {error}}


  )
);

`javascript export const RadioComponent: React.SFC = ({ value, onChange, error, showErrors, options, id }: any) => (


    {options.map(({ label, val }: { label: string; val: string }) => {
      const handleChange = () => onChange(val);
      return (
        
                      type="radio"
            onChange={handleChange}
            name={id}
            checked={value === val}
          />
          
            {label}
          
        
      );
    })}
    {showErrors && error && {error}}

);

const Radios = withForm(RadioComponent);`

`$3`

withFormButton is a higher order component that can a submit or action button

Javascript

`javascript const Button = withFormButton(({ children, ...rest }) => ( ));`

Typescript

`javascript const ButtonComponent: React.SFC = ({ children, ...rest }) => ( );

const Button = withFormButton(ButtonComponent);`

`Errors`

`$3`

Errors will be passed to the components by default. To suppress inline errors you can add the prophideErrors.

For example:

`Javascript`

`$3`

You can use the FormErrors component to display errors for specific components or for all errors on the form.

`javascript // will display all form errors

// to style errors you may pass props to parent container

// display errors for a single component

// display errors for multiple components

// use a custom renderer render={(error, idOfInputWithError) => ( {error} )} />`

`Implementation`

`$3`

validators contain a set of validators for performing input validations

`$3`

`javascript class App extends Component { state = { name: "", email: "" };

submit() { console.log(this.state); }

render() { return (


        
          
                      id="name"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
            validations={[validators.requiredWithMessage('Please enter a name'), validators.maxLength(20)]}
          />
                      id="email"
            value={this.state.email}
            onChange={e => this.setState({ email: e.target.value })}
            validations={[validators.required, validators.email]}
          />
                      id="age"
            value={this.state.age}
            onChange={e => this.setState({ age: e.target.value })}
            options={[
              { label: "one", val: 1 },
              { label: "ten", val: 10 },
              { label: "twenty", val: 20 },
              { label: "thirty", val: 30 }
            ]}
            validations={[validators.required, validators.minValue(15)]}
          />
                      id="status"
            value={this.state.status}
            onChange={status => this.setState({ status })}
            options={[
              { label: "alive", val: "alive" },
              { label: "dead", val: "dead" },
              { label: "on holiday", val: "on holiday" }
            ]}
            validations={[
              validators.requiredWithMessage("What is your status?")
            ]}
          />


    );
  }
}

$3

Dave Nicholas, Martin Carder, Ekta Wadhwani, Mariana Nicholas