React Simple FormKit

Support form handling simply. Simple, fast and productive.

Peer dependencies

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

Quick start

import { Form, useForm } form 'react-simple-formkit'

const form = useForm();
const { isDirty, actions } = form;

const handleSubmit = (data) => {
    alert(JSON.stringify(data));
};

return (
    <Form form={form} onSubmit={handleSubmit}>
        <input required name="email" />
        <input required name="password" type="password" />
        <button type="reset" disabled={!isDirty}>
            Reset
        </button>
        <button type="submit" disabled={!isDirty}>
            Submit
        </button>
    </Form>
);

More kits

Number fields

• By default form, values are string at all. So, adding numberFields will catch the number value in on submit

const form = useForm( {numberFields: ['number'] } );

return (
    <Form form={form}>
      <input name="number" placeholder=This is number field" />
      <button type="submit" disabled={!isDirty || isError}>
        Submit
      </button>
    </Form>
);

JS Built-in validate on blur

const form = useForm();
const { isDirty, isError, errors, actions } = form;

return (
    <Form form={form}>
      <input required name="email" placeholder="email" type="email" onBlur={actions.checkValidity} />
      {errors.email && <span>{errors.email}</span>}

      <button type="submit" disabled={!isDirty || isError}>
        Submit
      </button>
    </Form>
);

Double validate on blur

const form = useForm();
const { isDirty, isError, errors, actions } = form;

return (
    <Form form={form}>
      <input
        required
        name="number"
        onBlur={(e) => {
          let error = null;
          error = actions.getFieldValidity(e);

          if (error) {
            actions.changeError("number", error);
            return;
          }

          const value = Number(e.target.value || 0);
          if (value >= 10) error = "Number must be less than 10";
          actions.changeError("number", error);
          }}
      />
      {errors.number && <span className="error-message">{errors.number}</span>}

      <button type="submit" disabled={!isDirty || isError}>
        Submit
      </button>
    </Form>
);

Validate by other field

const form = useForm();
const { isDirty, isError, errors, actions } = form;

return (
  <Form form={form}>
    <input required name="number" onBlur={actions.checkValidity} />
    {errors.number && <span className="error-message">{errors.number}</span>}

    <input
      required
      name="number2"
      onBlur={(e) => {
        let error = null;
        error = actions.getFieldValidity(e);

        if (error) {
          actions.changeError("number2", error);
          return;
        }

        const value = Number(e.target.value || 0);
        const formState = actions.getFormState();
        const number = Number(formState.number || 0);

        if (value >= number) error = "Number 2 must be less than number 1";
        actions.changeError("number2", error);
      }}
    />
    {errors.number2 && <span className="error-message">{errors.number2}</span>}
    <button type="submit" disabled={!isDirty || isError}>
      Submit
    </button>
  </Form>
)

Centralized processing with onChange

const handleChange = (data) => {
  console.log(data);

  // setValue will trigger onChange by default and recall handle change making an infinite loop
  // That why we put shouldOnChange = false here
  actions.setValue("email2", data.email + "2", { shouldOnChange: false });
};

return (
  <Form form={form} onChange={handleChange}>
    <input required name="email" />
    {/* Controller make this field assignable */}
    <Controller
      name="email2"
      render={({ ref, name, value, setValue }) => (
        <input required ref={ref} name={name} value={value} onChange={(e) => setValue(e.target.value)} />
      )}
    />
    <button type="submit" disabled={!isDirty}>
      Submit
    </button>
  </Form>
);

Default values

• Just put defaultValue in input field, this library will load it when mounted and store to compare isDirty
• You can also use actions.getDefaultValues() to check what is stored

const [loading, setLoading] = useState(false);
const [defaultValues, setDefaultValues] = useState({ email: "email@example.com", password: "123456" });

const form = useForm();
const { isDirty, actions } = form;

const handleSubmit = async (data) => {
  setLoading(true);
  await new Promise((res) => setTimeout(res, 1500));
  setDefaultValues(data);
  // After update default values, reload the form
  // Because data updating is asynchronous. Catching it's change is ineffective.
  actions.reload();
  setLoading(false);
};

return (
  <Form form={form} onSubmit={handleSubmit}>
    <input required name="email" defaultValue={defaultValues.email} />
    <Controller
      name="password"
      defaultValue={defaultValues.password}
      render={({ ref, name, defaultValue, value, setValue }) => (
        <input
          ref={ref}
          required
          name={name}
          type="password"
          defaultValue={defaultValue}
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      )}
    />
    <button type="reset" disabled={!isDirty}>
      Reset
    </button>
    <Button disableElevation variant="contained" type="submit" loading={loading} disabled={!isDirty}>
      Submit
    </Button>
  </Form>
);

Support for third party library

Catch value instantly

• Some input types like DatePicker, Select just change by click and don't dispatch input actions
• You also catch this on submit, but cannot use for actions.getFormState() for validate and isDirty update
• Just put the actions.instantChange where these components onchange

const form = useForm();
const { isDirty, actions } = form;

return (
  <Form form={form}>
    <Select name="select" onChange={actions.instantChange}>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker name="date" onChange={actions.instantChange} />
    </LocalizationProvider>
    <button type="button" onClick={() => alert(JSON.stringify(actions.getFormState()))}>
      Get value
    </button>
    <button type="submit" disabled={!isDirty}>
      Submit
    </button>
  </Form>
)

More control with Controller

• Control custom values like object and array
• Make field assignable by actions.setValue

import { Controller, Form, useForm } from "react-simple-formkit";

const form = useForm({ numberFields: ["number1", "number2"] });
const { isDirty, actions } = form;

return (
  <Form form={form}>
    {/* Custom value as array */}
    <Controller
      name="multipleSelect"
      defaultValue={[]}
      render={({ ref, value, setValue, name }) => (
        <Select
          multiple
          ref={ref}
          name={name}
          labelId="demo-multiple-name-label"
          id="demo-multiple-name"
          value={value}
          onChange={(e) => {
            const value = e.target.value;
            // On autofill we get a stringified value.
            setValue(typeof value === "string" ? value.split(",") : value);
            // instantChange by select
            actions.instantChange();
          }}
          input={<OutlinedInput label="Name" />}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      )}
    />
    {/* actions.setValue (target field of actions.setValue must use controller)*/}
    <input
      name="number1"
      placeholder="number 1"
      onBlur={(e) => {
        const number1 = Number(e.target.value || 0);
        const number2 = actions.getFormState().number2 || 0;
        actions.setValue("sum", number1 + number2);
      }}
    />
    <input
      name="number2"
      placeholder="number 2"
      onBlur={(e) => {
        const number2 = Number(e.target.value || 0);
        const number1 = actions.getFormState().number1 || 0;
        actions.setValue("sum", number1 + number2);
      }}
    />
    <Controller
      name="sum"
      render={({ ref, value, setValue, name }) => (
        <input
          ref={ref}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          name={name}
          placeholder="sum(number1, number2)"
        />
      )}
    />
    <button type="button" onClick={() => alert(JSON.stringify(actions.getFormState()))}>
      Get value
    </button>
    <button type="submit" disabled={!isDirty}>
      Submit
    </button>
  </Form>
)

Examples

• https://codesandbox.io/p/sandbox/react-simple-formkit-examples-rhmhjj

Contact

For any ideas or issues, please get in touch with me at anhhuy2000@gmail.com