react-form-decorator
TypeScript icon, indicating that this package has built-in type declarations

0.4.1 • Public • Published

react-form-decorator

A lightweight react library for creating controlled form component.

NPM Build Status Known Vulnerabilities npm downloads/month

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

Dependencies (2)

Dev Dependencies (32)

Package Sidebar

Install

npm i react-form-decorator

Weekly Downloads

0

Version

0.4.1

License

MIT

Unpacked Size

97.8 kB

Total Files

36

Last publish

Collaborators

  • akshay9136