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.

What does this mean?

Validation can easily be added and removed to a form

Only validate what the user can see (see cross form validation below)

No need for a large set of upfront domain knowledge

Synchronous validation will update state immediately in the event of a change/blur.

Fewer renders, better performance and no weird "intermediary states".

While Yup is supported, you're not limited to using a large Yup schema. Validation functions receive the form state as well as the field value.

( value , state ) => { if ( state . otherField . value === 'yes' && ! value ) { throw Error ( 'This field is required' ) ; } } ,

Users don't want to find out that the value they entered on a previous page is invalid. This is why Fielder encourages field-level validation.

If the field isn't mounted, the value won't be validated. Simple!

Fielder has been built with hooks since day one. There aren't any clunky APIs to learn, only useField , useForm and useFormContext .

Your data doesn't need to be coupled to your components (and likely shouldn't be), that's why Fielder doesn't include a component API.

useForm is where you initiate your form. In order to expose the form to any child components (and subsequently useField ), you'll want to expose it via context.

const myForm = useForm ( ) ; return < FielderProvider value = { myForm } > { children } </ FielderProvider > ;

useField is where you harness the power of Fielder.

const [ usernameProps , usernameMeta ] = useField ( { name : 'username' , initialValue : 'fielder-user' , validate : validateUsername , } ) ; return ( < > < input type = " text " { ... usernameProps } /> { usernameMeta . hasChanged && usernameMeta . error && ( < ErrorMsg > { usernameMeta . error } </ ErrorMsg > ) } </ > ) ;

There are a whole number of additional arguments which can be passed to useField which allow you to:

Set validation

Set when validation is triggered (e.g. on blur, change, etc)

Set initial value, error and valid states

Set unmount behaviour