React Browser Form is a small React library designed as a single 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.

Features

1. Written with performance 💡, developer experience 🧑‍💻 and browser standards 🌐 in mind.
2. TypeScript-first with full type safety.
3. Comes with a TSDoc documentation including links to examples and docs.
4. Small size and no dependencies.
5. Non-opinionated, flexible and extensible.
6. Built-in validation and transformation support.
7. Minimal API with emphasis on best practices.

Docs & examples

Visit the Documentation for 🌐📝 React Browser Form.

Install

npm install --save react-browser-form
# OR
yarn add react-browser-form

Quickstart

See the Getting started page in our Docs for more information.

const defaultValues = { title: "" };
export type Form = typeof defaultValues;

export default function FormComponent() {
  const onSubmit = React.useCallback((values: Form) => {
    console.log(values);
  }, []);

  const { formProps, names } = useBrowserForm<Form>({
    name: "new-form",
    defaultValues,
    onSubmit,
  });

  return (
    <form {...formProps}>
      <input name={names.title} type="text" />
      <button type="submit">Subscribe</button>
    </form>
  );
}