gimme-react-form

gimme-react-form is a React component library that generates forms based on a TypeScript type and a simple configuration object.

Using amazing components from https://github.com/shadcn/ui !

Installation

To install the package, run:

npm install gimme-react-form

Usage

To use the library, import the GimmeForm component and pass it the following props:

• schema: a object configuration that defines the shape of the form data. Use the GimmeFormSchema type to convert your data type to a configuration object type.
• onSubmit: a callback function that receives the form data when the form is submitted.
• defaultValues (optional): an object that provides default values for the form fields.
• resolver (optional): a Yup or Zod validation schema or custom resolver that validates the form data.

Example usage:

import { GimmeFormSchema, GimmeForm } from "gimme-react-form";

type FormData = {
  name: string;
  //better to use "|undefined" then "property?:"
  age: number | undefined;
  isMarried: boolean;
  hobbies: {
    name: string;
    years: number;
  }[];
};

const formType: GimmeFormSchema<FormData> = {
  name: "string",
  age: "number?",
  isMarried: ["boolean", "Are you married?"], //or ['Married', 'Single'] to use switch instead of checkbox
  hobbies: { name: "string", years: "number" },
};

const handleSubmit = (data: FormData) => {
  console.log(data);
};

function App() {
  return <GimmeForm type={formType} onSubmit={handleSubmit}/>;
}

API

function GimmeForm<T>

The GimmeForm<T> is React component that renders the form.

export function GimmeForm<T extends FieldValues>({ schema, onSubmit, defaultValues, resolver }: GimmeFormProps<T>) {
  const formMethods = useForm<T>({ defaultValues, resolver });
  const { handleSubmit, formState } = formMethods
  return (
    <FormProvider methods={formMethods} onSubmit={handleSubmit(onSubmit)}>
      <GimmeFormInputs schema={schema} />
      <LoadingButton type="submit" activeBtnText="Submit" loading={formState.isSubmitting} />
    </FormProvider>
  )
}

function GimmeFormInputs<T>

The GimmeFormInputs creates only inputs. Those are expected to be on the form connected with react-hook-forms as in GimmeForm function, but it's possible to initialize that separately.

type GimmeFormSchema<T>

The GimmeFormSchema<T> type is used to convert a TypeScript type to a configuration object type that defines the shape of the form fields.

Contributing

Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

1. Fork this repository
2. Clone your forked repository to your local machine
3. Create a new branch: git checkout -b my-new-feature
4. Make your changes and commit them: git commit -m 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Create a new pull request

Please ensure that your code follows the existing coding style and includes examples and documentation for any new functionality.