Fielder

A field-first form library for React and React Native.

About

Fielder is a form library for React and React Native that has been built from the ground up with a field-first approach to validation.

Features

⚡️ Synchronous validation - no cascading renders

🛎 Validation events - validation can differ per event (change, blur, submit, etc.)

🪝 Hooks that work - hooks respond to validation changes

🧠 Evolving schemas - validation logic evolves with the UI

Basic usage

Install Fielder

Add Fielder to your project.

npm i fielder

Import the module

Use fielder or fielder/preact.

// React
import { useForm, ... } from 'fielder';

// Preact
import { useForm, ... } from 'fielder/preact';

Set up a form

Use the useForm hook to create a form.

const myForm = useForm();

return <FielderProvider value={myForm}>{children}</FielderProvider>;

Create some fields

Use the useField hook to create a field.

const [usernameProps, usernameMeta] = useField({
  name: 'username',
  initialValue: '',
  validate: useCallback(({ value }) => {
    if (!value) {
      throw Error('Username is required!');
    }
  }, []),
});

return (
  <>
    <input type="text" {...usernameProps} />
    <span>{usernameMeta.error}</span>
  </>
);

Additional info

Once you're all set up, be sure to check out the guides for a deeper dive!

Additional resources

For more info, tutorials and examples, visit the official docs site!

Also check out:

andyrichardson / fielder

readme