amazing-form

Amzing form

This amazing form customized by flower1708

• How to install

  npm i amazing-form

Example usage

import {
  Button,
  DateInput,
  FormComponent,
  FormElement,
  PasswordInput,
  TextInput,
} from "amazing-form";
import { useState } from "react";

function App() {
  const [text, setText] = useState("");
  const [password, setPassword] = useState("");
  const [isSubmitted, setIsSubmitted] = useState(false);

  const infomationForm: FormElement[] = [
    {
      type: "text",
      label: "Name",
      valueLabel: "name",
      placeholder: "Type your name",
      validation: (value) => value.length > 0,
    },
    {
      type: "password",
      label: "Password",
      valueLabel: "password",
      placeholder: "Type your password",
      validation: (value) => value.length > 0,
    },
    {
      type: "date",
      label: "Date of Birth",
      valueLabel: "dob",
      placeholder: "Type your date of birth",
      validation: (value) => value.length > 0,
    },
    {
      type: "switch",
      label: "Agree to terms",
      valueLabel: "agree",
      placeholder: "Do you agree to terms",
      validation: (value) => value === "true",
    },
  ];

  const handleSubmit = (data: Record<string, string | boolean>) => {
    alert(JSON.stringify(data));
    setIsSubmitted(true);
  };

  return (
    <>
      <div
        style={{
          padding: "10px",
        }}
      >
        <Button
          text="Submit"
          onClick={() => console.log("submit")}
          disabled={false}
          type="submit"
        />

        <Button
          text="Reset"
          onClick={() => console.log("reset")}
          disabled={false}
          type="reset"
        />

        <TextInput
          value={text}
          onChange={(value) => setText(value)}
          placeholder="Type something here"
          validation={(value) => value.length > 0}
          label="Text Input"
        />

        <PasswordInput
          value={password}
          onChange={(value) => setPassword(value)}
          placeholder="Type password here"
          validation={(value) => value.length > 0}
          label="Password Input"
        />

        <DateInput
          value={text}
          onChange={(value) => setText(value)}
          placeholder="Type something here"
          validation={(value) => value.length > 0}
          label="Date Input"
        />

        <div>
          <h1>Form Component</h1>
          <FormComponent elements={infomationForm} onSubmit={handleSubmit} />
          {isSubmitted && (
            <div>
              <p style={{ color: "green", fontWeight: "bold" }}>
                Form submitted
              </p>
            </div>
          )}
        </div>
      </div>
    </>
  );
}

export default App;