formorama v0.7.7

Read The Docs

What is Formorama?

Formorama is a library for managing your forms in React. This library was made when a project was moving away from Redux Forms. The reason I've decided to create this instead of using an existing library is because the project required subforms and many different types of input fields. For further information, visit the website.

Example

View this example on CodeSandbox.

interface TextFieldProps {
  name: string;
}

export const TextField: FC<TextFieldProps> = ({ name }) => {
  const { value, handleChange, handleFocus, handleBlur } = useInput(name, "");

  return (
    <div className="text-field">
      <input
        type="text"
        value={value}
        onChange={handleChange}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
    </div>
  );
};

interface FormValues {
  field1: string;
  sub: {
    field2: string;
  }
}

export const MyForm: FC = () => {
  const form = useForm<FormValues>();
  const [result, setResult] = useState<FormValues | null>(null);

  const handleSubmit = (values: FormValues) => setResult(values);

  return (
    <>
      <Form form={form} onSubmit={handleSubmit}>
        <TextField name="field1" />
        <SubForm name="sub">
          <TextField name="field2" />
        </SubForm>
        <button type="submit">Submit</button>
      </Form>

      {result && (
        <div>
          <h2>Last submission</h2>
          <pre>{JSON.stringify(result, null, 2)}</pre>
        </div>
      )}
    </>
  );
};