Flexible and lightweight framework for rendering and validating forms with React.
API Documentation and Showcase
npm install react-ocean-forms
yarn add react-ocean-forms
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>
API Documentation and Showcase
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.
Custom field components must use the new withField
higher order component. See Input.tsx for an implementation example.