useForm

useForm hook provides a simple way to handle forms.

Import

import { useForm } from "@prismane/core/hooks";

Usage

function Demo() {
  const { handleSubmit, handleReset, register } = useForm({
    fields: {
      username: {
        value: "",
        validators: {
          required: (v: string) => required(v),
          min: (v: string) => min(v, 4),
          username: (v: string) => username(v),
        },
      },
    },
  });

  return (
    <Form
      onSubmit={(e: any) => {
        handleSubmit(e, (v: any) => console.log(v));
      }}
      onReset={() => handleReset()}
    >
      <TextField
        placeholder="Enter username: "
        label="Username:"
        {...register("username")}
      />
      <Flex align="center" gap={fr(2)}>
        <Button variant="primary" type="submit">
          Submit
        </Button>
        <Button variant="primary" type="reset">
          Reset
        </Button>
      </Flex>
    </Form>
  );
}

API

Parameters

Name	Type	Description	Default
`initialForm`	`InitialFormState`	The initial state of the form.	`{}`

type InitialFormState = {
  fields?: InitialFields;
  validateOn?: "change" | "blur" | "all";
  resetOptions?: {
    keepDirty?: boolean;
    keepTouched?: boolean;
    keepErrors?: boolean;
  };
};

type InitialField = {
  value: any;
  error?: null | string;
  validators?: Validators;
};

type InitialFields = {
  [x: string]: InitialField;
};

type Validator = (v: string) => null | string;

type Validators = { [x: string]: Validator };

Return Value

Name	Type	Description
`formState`	`FormState`	The current state of the form.
`register`	`(name: string) => void`	Function that registers the field.
`setValue`	`(name: string, value: Value) => void`	Function that programmatically changes the value of a field.
`setError`	`(name: string, error: string) => void`	Function that programmatically sets an error for the field.
`getFormValues`	`() => {[x in string]: Value}`	Function that returns the current values of all the fields registered.
`getValue`	`(name: string) => Value`	Function that returns the current value for a given field.
`getFormErrors`	`() => {[x in string]: string}`	Function that returns the current errors of all the fields registered.
`getError`	`(name: string) => string`	Function that returns the current error for a given field.
`validate`	`(name: string, value: Value) => string`	Function that validates a field using all of it's provided validators and returns the error.
`handleChange`	`(name: string, value: Value) => string`	Function that handles the change of the value for a given field.
`handleBlur`	`(name: string) => void`	Function that handles the blur of a given field and marks it as touched.
`validateForm`	`() => boolean`	Function that validates the whole form and returns a boolean which determines if it has errors.
`handleReset`	`() => void`	Function that resets the state of all of the fields in the registered form.
`handleSubmit`	`(event: any, onSubmit: (values: Values) => void, onError: (values: Values) => void) => void`	Function that handles the submit of the form.

Go BackuseFocusTrap

Up NextuseId