# react-valour-form

> Force validation of components wrapped with wrap-component-with-valour

Latest version **0.2.0** (published 2017-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-valour-form
pnpm add react-valour-form
yarn add react-valour-form
bun add react-valour-form
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2017-04-18 |
| First published | 2017-04-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aabenoja |

## Links

- npm: https://www.npmjs.com/package/react-valour-form
- npm.io page: https://npm.io/package/react-valour-form

## Dependencies (1)

- [lodash.noop](https://npm.io/package/lodash.noop.md) ^3.0.1

## Recent versions

- 0.2.0 (latest) — 2017-04-18
- 0.1.0 — 2017-04-18
- 0.0.1 — 2017-04-18

## README

react-valour-form
=================

[![Build Status](https://travis-ci.org/aabenoja/react-valour-form.svg?branch=master)](https://travis-ci.org/aabenoja/react-valour-form)

A simple form component to wrap around your valour-enhanced inputs.

## Props

* `formName` * required

  The name of the valour form all the wrapped inputs will be validated against
  
  
* `onValidatedSubmit` - **Defaults to NOOP**

  The callback made after the submit event is fired and validation against all fields has been made. Two parameters are passed to this callback, `formIsValid`
  and `validationResults`. The first is what you get back from `valour.isValid(yourFormName)`, and the second is what is returned from `valour.getResult(yourFormName)`.


## Usage

```jsx
import React from 'react';
import valour from 'valour';
import wrapWithValour from 'wrap-component-with-valour';
import ValourForm from 'react-valour-form';
import CustomInput from './path/to/CustomInput';

const rules = {
  Email: valour.rule.isEmail()
};

const WrappedInput = wrapWithValour(CustomInput);

export default class ForgotPassword extends React.Component {
  constructor(props) {
    super(props);
  }
  
  onChange(e) {
    const { value } = e.target;
    this.setState({ email: value });
  }
  
  onStateChanged(valueName, value, isValid, validationMessage) {
    this.setState({ errorMessage: validationMessage });
  }
  
  onSubmit(isValid, validationResults) {
    if (isValid) {
      // handle things as normal
      return;
    }
    
    // potentially do stuff with validationResults on error
  }

  render() {
    return (
      <ValourForm onValidatedSubmit={this.onSubmit} formName="myTestForm">
        <h3>{ this.state.errorMessage }</h3>
        <WrappedInput
          valueName="Email"
          rules={rules}
          onValidationStateChanged={this.onStateChanged}
          onChange={this.onChange}
          {...otherInputProps}
        />
      </ValourForm>
    );
  }
}
```

---
_Source: https://npm.io/package/react-valour-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._