# @webinex/react-validation

> React validation library

Latest version **0.0.2-beta-0.1** (published 2018-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @webinex/react-validation
pnpm add @webinex/react-validation
yarn add @webinex/react-validation
bun add @webinex/react-validation
```

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2-beta-0.1 |
| Published | 2018-08-24 |
| First published | 2018-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Webinex |
| Maintainers | webinex |

## Links

- npm: https://www.npmjs.com/package/@webinex/react-validation
- npm.io page: https://npm.io/package/@webinex/react-validation

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.4.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.2

## Recent versions

- 0.0.2-beta-0.1 (latest) — 2018-08-24
- 0.0.3-beta-1.0.1 (beta) — 2019-02-19
- 0.0.3-beta-1.0 — 2019-02-19
- 0.0.2-beta-2.6 — 2018-12-21
- 0.0.2-beta-2.5 — 2018-12-20
- 0.0.2-beta-2.4 — 2018-12-07
- 0.0.2-beta-2.3 — 2018-10-26
- 0.0.2-beta-2.2 — 2018-10-26
- 0.0.2-beta-2.1 — 2018-10-25
- 0.0.2-beta-1.13 — 2018-10-17
- 0.0.2-beta-1.12.3 — 2018-09-11
- 0.0.2-beta-1.12.2 — 2018-09-11
- 0.0.2-beta-1.12.1 — 2018-09-11
- 0.0.2-beta-1.12 — 2018-09-11
- 0.0.2-beta-1.11 — 2018-09-11
- … 17 more at https://npm.io/package/@webinex/react-validation/versions

## README

How to use:

Create any component:
formField.tsx
```
export class FormField extends React.Component<{ onChange, value }> {
  render() {
    return <input onChange={this.props.onChange} value={this.value} />
  }
}
```

Now, it should be converted to validatable control:
formField.tsx
```
import { makeControl } from 'react-validation';

class FormFieldComponent extends ReactComponent<ValidationProps<{ onChange, value }>> {
  render() {
    return <input
            style={{ border: !this.props.isValid && this.props.isChanged ? '1px solid red' : '' }}
            onChange={this.props.onChange}
            value={this.value} />
  }
}

export const FormField = makeControl(FormFieldComponent);
```

Now we gonna to use containers.
First time, we should activate it.
app.tsx
```
export class App extends React.Component {
  render() {
    return (
      <ValidationProvider>
        <UserForm />
      </ValidationProvider>
    )
  }
}
```

Now we'll create UserForm:
userForm.tsx
```
@injectValidation
export class UserForm extends React.Component<{ validationContainer }> {
  constructor(props) {
    super(props);
    this.state = { isValid: true };
    this.props.validationContainer.onInvalid(this.onInvalid.bind(this));
    this.props.validationContainer.onValid(this.onValid.bind(this));
  }

  render() {
    return (
      <div style={{ border: this.state.isValid ? '' : '1px solid red' }}>
        {/* When any of these fields becomes invalid - all container becomes invalid */}
        <FormField ........ validations={[ required, email ]} />
        <FormField ........ validations={[ required, phone ]} />
        <FormField ........ validations={[ required, max(250) ]} />
      </div>
    );
  }

  onValid() {
    this.setState({ isValid: true });
  }

  onInvalid() {
    this.setState({ isValid: false });
  }
}
```

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