Skip to content
A React form library which adapts to change.
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
docs Fix formatting Feb 25, 2020
examples Add branching examples to docs Feb 25, 2020
src Duplicate field - add warning instead of error (#45) Feb 25, 2020
.eslintrc Setup linting (#16) Jan 9, 2020
.github_changelog_generator
.gitignore
.npmignore
.nvmrc
.prettierrc Add docs (#5) Jan 8, 2020
CHANGELOG.md Version v1.2.1 Feb 25, 2020
CONTRIBUTING.md Add deploy info Jan 9, 2020
LICENSE Create LICENSE Nov 27, 2019
README.md Update to use hasChanged/hasBlurred Feb 5, 2020
jest.config.js Setup linting (#16) Jan 9, 2020
package-lock.json
package.json
rollup.config.js
tsconfig.json Add rollup Nov 27, 2019

README.md

Fielder logo

Fielder

A React form library which adapts to change.

build version size coverage licence docs

About

Fielder 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

Features

⚡️Immediate validation

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

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

🔍 Optimized for flexibility

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) =>
  state.otherField.value === 'string'
    ? Yup.string()
        .required()
        .validateSync(value)
    : Yup.number().validateSync(value);

🤓User focused API

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!

💁‍♂️ One way to do things

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.

Usage

Install Fielder

Install using your package manager of choice.

npm i fielder

Setting up a form

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>;

Declaring fields

useField is where you harness the power of Fielder.

const [nameProps, nameMeta] = useField({
  name: 'userName',
  validate: useCallback(
    v =>
      Yup.string()
        .required()
        .validateSync(v),
    []
  )
});

return (
  <>
    <input type="text" {...nameProps} />
    {nameMeta.hasChanged && nameMeta.error && (
      <ErrorMsg>{nameMeta.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, valid and touched states
  • Set unmount behaviour

Note: Unlike other popular form libraries, Fielder allows you to change config options (such as validation) at any time.

Resources

For more info and examples, check out the official docs site.

For a deeper dive on Fielder and why it exists, check out this blog post.

You can’t perform that action at this time.