@webinex/react-validation v0.0.2-beta-0.1

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 });
  }
}