Welcome to the documentation for

🌐📝 React Browser Form

React form state management written in TypeScript with performance and developer experience in mind.
Flexible and with built-in validation.
React Browser Form is a small React library designed as a hook intended to handle form usage in React while incentivizing the usage of web forms. It is designed to be flexible, performant, easy to learn and use and to handle even very complex forms while providing full type safety and an amazing developer experience. Read more in FAQ.
const defaultValues = { name: "John" };
type Form = typeof defaultValues;

function Component() {
  const { formProps } = useBrowserForm<Form>({ name: "example", defaultValues });

  return <form {...formProps} />;
}
GitHub
Introduction
Getting started
Documentation
Examples
FAQ
Contribute

Philosophy & values

  1. Super fast. Written with performance in mind.
    React Browser Form takes performance very seriously and aims to outperform other libraries by only ever doing what it needs to. No data transformation, validation or collecting unless required. Read more at How it works section in Documentation.
  2. Developer-first experience. Minimal and junior-friendly.
    Minimal, effective and easy to learn - anyone regardless of their skill level can start using React Browser Form now. Visit Minimal form example to see what we mean by minimal. A big part of our developer experience philosophy is maintaining a very verbose documentation.
  3. Automatic type coercion based on input type
    Use forms without object parsers and validators and still receive correct data types. Visit Automatic value types to see how it works.
  4. TypeScript-first. Type safety, hints and checks.
    Written entirely in TypeScript with a heavy emphasis on type safety. Fully documented. With examples, inline documentation and types to help you prevent errors and improve developer experience.
  5. Small bundle size and 0 dependencies.
    React Browser Form stricly uses React hooks and has a very small bundle size. This is a core part of the project philosophy - let the browser handle what it can for us - developers.
  6. Flexible, with full control. Handle any complexity.
    Take control with live fields, different modes and error revalidation strategies. See Real world usage examples to see what you can do. Even our current limitations can be overcome with a simple workaround.
  7. Validation and transformation - simple, minimal, powerful.
    React Browser Form transform data types automatically, but you can also transform values or not transform anything at all. Or validate - use required fields, write one-line validators, write chainable and composable validators for complex logic. See Validation and transformation for more info.

Limitations & known issues

This is a list of all the current limitations and known issues you need to be aware of when working with React Browser Form. As adoption rate grows, we will keep this list up-to-date.

  1. Measure the amount of times each internal function ran.Critical

    Verify that the performance is top-notch and we still only rely on browsers to do what they need to do. Optimize if necessary before public release. Also document this and provide all that in "How it works" separate docs page with screenshots and examples.

  2. Only works within browsersWill not change

    React Browser Form is optimized for SSR, however it will only work in browser environemnt. It utilizes and incentivizes the use of Web Forms, which is a web browser standard. It doesn't work with inputs, but with document.forms.

  3. No field array APINext minor release

    As shown in the example Invoice array fields, there is no first-class support for using field arrays yet. While it is possible (and quite easy) to do without a supported API, it goes against point 2 of the philosophy.

  4. No i18n supportIn the future

    If you change strings inside validation schema for validation feedback, React Browser Form will ignore those as options are considered immutable right now due to the initial architecture. For the time being, you can re-render the whole component to re-initialize.

  5. No 3rd party validator library support yet.In the future

    There is already a support added for transformation and validation, but no current first-class API for 3rd party libraries, like Zod, Yup or Joi. Implementing these might set up a need to overwrite the current behavior and possibly modify the data flow so it still makes sense.

Next steps


Convinced already?

Check out the Getting started guide, which also contains the Usage guide or jump straight into the Examples if you prefer learning by code.

Still hesitating?

That is understandable. Seeing the Performance examples in action might change your mind quickly.

Have suggestions?

Raise an issue in the GitHub repository to spark a discussion or open a pull request to suggest changes.