https://github.com/andyrichardson/fielder

A field-first form library for React and React Native
https://github.com/andyrichardson/fielder

form forms hooks react schema state yup

Last synced: about 2 months ago
JSON representation

A field-first form library for React and React Native

• Host: GitHub
• URL: https://github.com/andyrichardson/fielder
• Owner: andyrichardson
• License: mit
• Created: 2019-08-18T12:30:28.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-09-19T14:24:26.000Z (about 2 years ago)
• Last Synced: 2024-07-20T16:44:37.781Z (2 months ago)
• Topics: form, forms, hooks, react, schema, state, yup
• Language: TypeScript
• Homepage: https://fielder.andyrichardson.dev
• Size: 18.4 MB
• Stars: 196
• Watchers: 5
• Forks: 10
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



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](https://dev.to/andyrichardsonn/why-we-need-another-form-library-fielder-4eah).

## 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.

```sh

npm i fielder

```

### Import the module

Use `fielder` or `fielder/preact`.

```tsx

// React

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

// Preact

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

```

### Set up a form

Use the `useForm` hook to create a form.

```tsx

const myForm = useForm();

return {children};

```

### Create some fields

Use the `useField` hook to create a field.

```tsx

const [usernameProps, usernameMeta] = useField({

  name: 'username',

  initialValue: '',

  validate: useCallback(({ value }) => {

    if (!value) {

      throw Error('Username is required!');

    }

  }, []),

});

return (

  <>

    

    {usernameMeta.error}

  >

);

```

### Additional info

Once you're all set up, be sure to check out [the guides](http://fielder.andyrichardson.dev/guides/getting-started) for a deeper dive!

## Additional resources

For more info, tutorials and examples, visit the **[official docs site](https://fielder.andyrichardson.dev/)**!

Also check out:

- [[Article] Why we need another form library](https://dev.to/andyrichardsonn/why-we-need-another-form-library-fielder-4eah)

- [[Benchmark] Fielder vs Formik](https://github.com/andyrichardson/fielder-benchmark)

- [[Video] Getting started with Fielder](https://www.youtube.com/watch?v=wSorSlCkJwk)