react-form-context v0.1.5

react-form-context

Form validation and context library for React.

Usage

Making a FormContextAware component

• Your component should accept props for isSubmitting and hasSubmitted (both boolean values).

const MyComponent = ({isSubmitting, hasSubmitted, ...rest}) => {
  //Component render code
}

• Then, just wrap your component in the formContextAware HOC.

import { formContextAware } from 'react-form-context';
// Other imports...

const MyComponent = ({isSubmitting, hasSubmitted, ...rest}) => {
  //Component render code
}

export default formContextAware(MyComponent);

Making a validated component

• Your component should accept props for validationErrors (an array of strings) and isValidating (a boolean value).

const MyComponent = ({validationErrors, isValidating, ...rest}) => {
  //Component render code
}

• Then, just wrap your component in the withValidation HOC.

import { withValidation } from 'react-form-context';
// Other imports...

const MyComponent = ({validationErrors, isValidating, ...rest}) => {
  //Component render code
}

export default withValidation(MyComponent);

Using wrapped components

• The included Form element creates the context required for withValidation and formContextAware.
• To use a component wrapped with one of these HOC's, just make sure they are nested within <Form></Form.

import { Form } from 'react-form-context';
// Valid
<Form>
  <MyComponent />
</Form>

//Invalid
<MyComponent />