Getting started

A guide to get you started with React Browser Form in a few seconds.

Install the library

npm install react-browser-form

yarn add react-browser-form

Initialize the form with a hook

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

return <form {...formProps} />;

Add default values and schema type

const defaultValues = {
  email: "roberta_warren@znation.com",
};
type Form = typeof defaultValues;

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

  return <form {...formProps} />;
}

Add inputs with name checking

const defaultValues = {
  email: "roberta_warren@znation.com",
};
type Form = typeof defaultValues;

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

  return (
    <form {...formProps}>
      <input type="email" placeholder="E-mail address" name={names.email} />
      <button type="submit">Subscribe</button>
    </form>
  );
}

Next steps

Now you have a fully functional, performant and minimal setup and you are ready to create any form. If you are unfamiliar with React Browser Form, these are great resources to look at next: