react-ocean-forms

Flexible and lightweight framework for rendering and validating forms with React.

API Documentation and Showcase

Features

• Field-wide async and sync validation
• Form-wide validation (only sync)
• Support for custom validators
• Support for custom input types

Install

npm install react-ocean-forms

yarn add react-ocean-forms

Usage

To use the Forms you need to import its components into the file where you want to use them.

import { Form, Input } from 'react-ocean-forms';

Then use the form where needed.

<Form
  onSubmit={this.handleSubmit}
  onValidate={this.handleValidate}
  defaultValues={{ name: 'test'}}
  asyncValidateOnChange
>
  <Input
    name="name"
    label="demo_name"
  />

  <button type="submit">Submit</button>
</Form>

Documentation and Showcase

API Documentation and Showcase

Upgrading from react-ocean-forms 1.x.x to 2.0.0

From version 2.0.0 onwards the syntax for Field has changed. Previously a field would be written like this:

Before:

<Field
  name="demo"
  label="My demo field"
  component={Input}
  />

After:

<Input
  name="demo"
  label="My demo field"
  />

The input component is now used directly without using it in the component prop of the field.

Changes for writing custom field components

Custom field components must use the new withField higher order component. See Input.tsx for an implementation example.