react-form-decorator

A lightweight react library for creating controlled form component.

Install

npm install --save react-form-decorator

Usage

import React from "react";
import { Form, FormField } from "react-form-decorator";
import { FormInstance } from "react-form-decorator/dist/types";
import "react-form-decorator/dist/index.css";

const GiftCard = () => {
  const formRef = useRef<FormInstance>();

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault();
    formRef.current!.validateForm().then((values) => {
      console.log("handleSubmit", values);
    });
  };

  return (
    <Form ref={formRef} onSubmit={handleSubmit}>
      <FormField
        name="amount"
        required={true}
        addons={[
          <div className="control">
            <button className="button">$</button>
          </div>,
          null,
        ]}
      >
        {(props) => <input type="number" min="1" {...props} />}
      </FormField>
      <FormField name="quantity" initial="1">
        {(props) => (
          <select {...props}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        )}
      </FormField>
      <button className="button" type="submit">
        Add Gift Card
      </button>
    </Form>
  );
};

const SetPassword = () => {
  const formRef = useRef<FormInstance>();

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault();
    formRef.current!.validateForm().then((values) => {
      console.log("handleSubmit", values);
    });
  };

  return (
    <Form ref={formRef} onSubmit={handleSubmit}>
      <FormField name="password" required>
        {(props) => (
          <input type="password" placeholder="New Password" {...props} />
        )}
      </FormField>
      <FormField
        name="confirm"
        required
        validate={(value) => {
          const { input } = formRef.current!.formState;
          if (value !== input.password) {
            return ["error", "Passwords do not match"];
          }
          return [];
        }}
      >
        {(props) => (
          <input type="password" placeholder="Confirm Password" {...props} />
        )}
      </FormField>
      <button className="button" type="submit">
        Set Password
      </button>
    </Form>
  );
};

License

MIT © akarande777