Basic usage

A very basic form example with a reset button. This form uses an onChange handler to get cleared data.

This example uses react-bootstrap for styling purposes and some custom UI components for visual aspects.

Very simple form example

This form is the same as Minimal form example, however it uses everything that you normally would want to.

import React from "react";
import { useBrowserForm } from "react-browser-form";

// UI for documentation only
import { Button } from "react-bootstrap";
import { FormGroup, FormTextInput } from "ui/forms";

const defaultValues = {
  email: null as string | null,
};
type Form = typeof defaultValues;

export function ExampleBasicMinimal() {
  const [data, setData] = React.useState<Form>();

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

  return (
    <form {...formProps}>
      <FormGroup>
        <FormTextInput label="E-mail address" name={names.email} />
      </FormGroup>
      <Button type="submit" size="sm">
        Subscribe
      </Button>
    </form>
  );
}

Form meta
Submitted?	No
Has errors?	No
Is dirty?	No
Change reason
Form state

Realistic basic usage

This form includes some extras - a reset button, 1 field with default value and more fields to provide a more realistic demonstration.

import React from "react";
import { useBrowserForm } from "react-browser-form";

// UI for documentation only
import { Button, Stack } from "react-bootstrap";
import { FormCheckbox, FormGroup, FormGroupTitle, FormTextarea, FormTextInput } from "ui/forms";

const defaultValues = {
  name: "Jonas",
  commentTitle: "",
  commentBody: "",
  rememberMe: true,
};
type Form = typeof defaultValues;

export function ExampleBasicUsage() {
  const [data, setData] = React.useState<Form>();

  const { formProps, names } = useBrowserForm<Form>({
    name: "example-basic-usage-form",
    defaultValues,
    onSubmit: setData,
    onChange: setData, // Used because of reset button
  });

  return (
    <form {...formProps}>
      <FormGroupTitle>Leave a comment</FormGroupTitle>
      <FormGroup>
        <FormTextInput label="Your name" name={names.name} />
        <FormTextInput label="Comment title" name={names.commentTitle} />
      </FormGroup>
      <FormTextarea placeholder="What's on your mind?" name={names.commentBody} rows={3} />
      <FormCheckbox label="Remember me next time" name={names.rememberMe} />

      <Stack direction="horizontal" className="justify-content-end">
        <Button type="reset" variant="outline-danger" className="me-1" size="sm">
          Clear
        </Button>
        <Button type="submit" size="sm">
          Post comment
        </Button>
      </Stack>
    </form>
  );
}

Form meta
Submitted?	No
Has errors?	No
Is dirty?	No
Change reason
Form state