Forms Creator

A React component for creating dynamic forms with validation using Zod schemas.

Installation

You can install the forms-creator package via npm:

npm install forms-creator

or yarn

yarn add forms-creator

Usage

Importing the Component

import FormCreator from 'forms-creator'

Creating Form Fields

Consider organizing your form field definitions in a forms folder. Each form can have its own file containing the field definitions.

For example, you can create a LoginForm.ts file inside the forms folder:

// forms/LoginForm.ts
import { z } from 'zod'
import { FieldObject } from 'forms-creator/types'

export const loginFormFields: FieldObject[] = [
{
name: "username",
value: "",
type: "text",
label: "Username",
validationSchema: z.string().min(3, "Username must be at least 3 characters long"),
isRequired: true,
errorClassName: "error",
},
{
name: "password",
value: "",
type: "password",
label: "Password",
validationSchema: z.string().min(6, "Password must be at least 6 characters long"),
isRequired: true,
errorClassName: "error",
},
]

Using the FormCreator Component

import { loginFormFields } from './forms/LoginForm'

// Inside your component
<FormCreator className='form' fields={loginFormFields} onSubmit={handleSubmit} submitText='Login' />

Handling Form Submission

import {Typeofy} from "forms-creator"

const handleSubmit = (formData:Typeofy(loginFormFields)) => {
// Handle form submission here
console.log('Form data:', formData)
}

Props

| Prop | Type | Description | | --------------- | ----------------- | ------------------------------------------------------------------------------- | | className | String | CSS class name for styling the form itself. | | fields | Array | An array of FieldObject instances representing form fields. | | onSubmit | Function | A function to handle form submission. It receives the form data as an argument. | | submitText | String (optional) | Text to display on the submit button (default is "Submit"). | | submitClassName | String (optional) | CSS class name for styling the submit button. |

Field Options

| Option | Type | Description | | ---------------- | --------------------------------- | ------------------------------------------------------------------------------------- | | name | String | The name of the form field. | | value | String | Number | Boolean | The initial value of the form field. | | type | String | The type of the form field (text - number - textarea - checkbox - file). | | className | String (optional) | CSS class name for styling the input field. | | parentClassName | String (optional) | CSS class name for styling the parent div of the input field. | | child | React.ReactNode (optional) | React node for rendering additional content inside the parent div of the input field. | | customInput | Custom React Component (optional) | Custom React component for rendering the input field. | | validationSchema | Zod Schema (optional) | Zod schema for validating the input field value. | | label | String (optional) | Label text for the input field. | | isRequired | Boolean (optional) | Boolean indicating whether the input field is required. | | errorClassName | String (optional) | CSS class name for styling the error message. |