get-form-values

A reusable React form component for easy form creation with built-in validation and customization.

Installation

To install get-form-values, run the following command in your terminal:

npm install get-form-values

Usage

Importing the Component

import React from 'react';
import Form from 'get-form-values';
import 'get-form-values/dist/App.css'; // Import default styles if needed

Defining Form Fields

Define your form fields as an array of objects:

const fields = [
  { name: 'email', label: 'Email', placeholder: 'Enter your email', type: 'email', required: true },
  { name: 'password', label: 'Password', placeholder: 'Enter password', type: 'password', required: true, minLength: 6 },
  { name: 'confirmPassword', label: 'Confirm Password', placeholder: 'Confirm password', type: 'password', required: true },
];

Handling Form Submission

Define a function to handle form submission:

const handleFormSubmit = (values) => {
  console.log('Form submitted with values:', values);
};

Rendering the Component

Render the Form component with the defined fields and submission handler:

<Form
  fields={fields}
  onSubmit={handleFormSubmit}
  buttonTitle="Signup"
  header="Signup"
/>

Props

| Prop | Type | Required | Default | Description | |--------------------|-----------|----------|---------------|-------------| | fields | Array | ✅ Yes | [] | An array of field objects. | | onSubmit | Function | ✅ Yes | null | Function to handle form submission. | | buttonTitle | String | ❌ No | 'Submit' | The submit button text. | | header | String | ❌ No | '' | Header text displayed above the form. | | className | String | ❌ No | '' | Custom class for form container. | | formClassName | String | ❌ No | '' | Custom class for the <form> element. | | inputClassName | String | ❌ No | '' | Custom class for input fields. | | labelClassName | String | ❌ No | '' | Custom class for labels. | | buttonClassName | String | ❌ No | '' | Custom class for the submit button. | | errorClassName | String | ❌ No | '' | Custom class for error messages. | | defaultValues | Object | ❌ No | {} | Default form values. | | isLoading | Boolean | ❌ No | false | Show loading state on submit button. | | disabled | Boolean | ❌ No | false | Disable form fields and button. | | renderInput | Function | ❌ No | null | Custom input rendering function. |

Advanced Usage Scenarios

1️⃣ Custom Styling

Apply your own CSS classes:

<Form
  fields={fields}
  onSubmit={handleFormSubmit}
  className="custom-form"
  inputClassName="custom-input"
  buttonClassName="custom-button"
/>

2️⃣ Default Values

Pre-fill form fields with default values:

<Form
  fields={fields}
  onSubmit={handleFormSubmit}
  defaultValues={{ email: '[email protected]' }}
/>

3️⃣ Custom Input Components (e.g., Material UI)

Use a custom input component instead of the default HTML input:

<Form
  fields={fields}
  onSubmit={handleFormSubmit}
  renderInput={(name, value, handleChange) => (
    <input className="custom-class" value={value} onChange={handleChange} />
  )}
/>

4️⃣ Validation Rules

Add advanced validation rules like required, minLength, maxLength, and pattern:

const fields = [
  { name: 'username', label: 'Username', required: true, minLength: 3 },
  { name: 'phone', label: 'Phone Number', pattern: "^\d{10}$", customErrorMessages: { pattern: "Invalid phone number" } },
];

5️⃣ Loading & Disabled States

Disable the form or show a loading state on submission:

<Form
  fields={fields}
  onSubmit={handleFormSubmit}
  isLoading={true}
  disabled={true}
/>

License

This project is licensed under the MIT License.

Contributions

Feel free to contribute by submitting issues or pull requests on GitHub! 🚀