🚀 react-dynamic-form: Dynamic Forms Made Easy

react-dynamic-form is a powerful, lightweight form library for React applications that lets you create stunning, functional forms with minimal effort. Say goodbye to complex setups and hello to intuitive, responsive forms that just work.

✨ Features

• 🎨 Beautiful UI out of the box: Sleek, modern designs that adapt to your brand
• 🔧 Easy customization: Tailor forms to your exact needs with simple configuration
• 🛡️ Built-in error handling: Robust validation with clear, user-friendly error messages
• 📱 Fully responsive: Perfect on desktop, tablet, or mobile
• 🔌 Plug and play: Get started with just a few lines of code
• 🚦 Smart submission handling: Seamless form submissions with success and error states
• ⚛️ React integration: Seamlessly works with your React components and frameworks like Next.js

🚀 Quick Start

Benefits

• Reusability: Create forms dynamically without rewriting the component logic.

• Formik & Yup Integration: Enables smooth form handling and validation out of the box.

• Customizable Styles: Fully customizable styling for labels, inputs, and containers.

• Validation: Supports validation for multiple input types using Yup and custom regex patterns.

• Dynamic Fields: You can add input fields like text, email, password, textarea, radio, checkbox, file upload, and more.

Installation

Install react-dynamic-form using npm:

npm install express-react-form

Or using yarn:

yarn add express-react-form

or using pnpm

pnpm add express-react-form

or using bun

bun add express-react-form

Imports

In your React component, import the necessary modules:

import DynamicForm, { FormField } from "express-react-form";
import "express-react-form/dist/styles.css";

Basic Usage

Here’s an example of how to use the DynamicForm component with basic fields:

const formData = [
  {
    id: 1,
    label: "First Name",
    name: "firstName",
    type: "text",
    required: true,
    displayErrorMessage: true,
  },
  {
    id: 2,
    label: "Email",
    name: "email",
    type: "email",
    required: true,
    displayErrorMessage: true,
  },
];

const handleSubmit = (values) => {
  console.log(values);
};

export default function BasicFormExample() {
  return <DynamicForm formData={formData} onSubmitFun={handleSubmit} />;
}

In this example, the form renders two input fields: one for the first name and one for email. Upon submission, the form data is logged to the console.

Props Table

The following table describes the props for the DynamicForm component:

| Prop Name | Type | Description | | --------------------- | --------------------------------------------------- | --------------------------------------- | | formData | Array of form field objects - FormField[] | Defines the fields in the form. | | edit | boolean | If true, the form will be in edit mode. | | containerStyles | { className?: string; style?: React.CSSProperties } | Styles for the entire form container. | | buttonStyles | { className?: string; style?: React.CSSProperties } | Styles for the submit button. | | buttonContainerStyles | { className?: string; style?: React.CSSProperties } | Styles for the button container. | | onSubmit | (values: Record<string, any>) => void | Function to handle form submission. | | formikRef | React.RefObject<FormikRef> | Provides access to Formik instance. |

FormField Type

The FormField object has the following structure:

| Prop Name | Type | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | | id | number | Unique identifier for each field. | | label | string | The label text for the field. | | name | string | The name attribute for the field, used for form values. | | type | "text" or"email" or"password" or "textarea" or "number" or "enum" or "time" or "date" or "checkbox" or "radio" or "file" | Input type for the field (e.g., text, email, radio). | | required | boolean | If true, the field will be required. | | disabled | boolean | If true, the field will be disabled. | | displayErrorMessage | boolean | If true, the error message will be displayed below the field. | | regexPattern | string | Custom regex pattern for field validation. | | value | number or string or boolean | Pre-filled value for the field. | | options | { label: string; value: string }[] | Options for enum or radio fields. | | labelStyles | { className?: string; style?: React.CSSProperties } | Styles for the label element. | | inputStyles | { className?: string; style?: React.CSSProperties } | Styles for the input element. | | inputContainerStyles | { className?: string; style?: React.CSSProperties } | Styles for the input container. | | radioInputContainerStyles | { className?: string; style?: React.CSSProperties } | Styles for the radio input container. |

FormikProps

What is FormikProps?

FormikProps is an interface provided by Formik, a popular form management library in React. It contains various methods, properties, and state data that allow you to control and interact with forms dynamically. Using FormikProps, you can manage form values, errors, touched states, validation, submission, and more.

FormikRef

The formikRef prop allows you to access and control the Formik form instance programmatically. This is particularly useful when you need to interact with the form outside of its immediate component, such as submitting the form from an external button or resetting the form.

Usage

1. Create a ref in your parent component:

const formRef = useRef<FormikProps<any>>(null);

2. Pass the ref to the DynamicForm component:

<DynamicForm
  formikRef={formRef}
  formData={formData}
  onSubmitFun={handleSubmit}
/>

3. Use the ref to interact with the form:

// Submit the form
formRef.current?.submitForm();

// Reset the form
formRef.current?.resetForm();

// Set a field value
formRef.current?.setFieldValue('fieldName', 'newValue');

// Check if the form is valid
const isValid = formRef.current?.isValid;

Available Methods and Properties

When using formikRef, you can access various Formik methods and properties:

• values: Current form values
• errors: Current form errors
• touched: Fields that have been touched
• isSubmitting: Boolean indicating if the form is currently submitting
• isValidating: Boolean indicating if the form is currently validating
• submitForm(): Manually submit the form
• validateForm(): Manually validate the form
• setFieldValue(field, value): Set a field's value
• setFieldError(field, errorMsg): Set a field's error message
• setFieldTouched(field, isTouched): Set a field's touched state
• resetForm(): Reset the form to its initial state

For a complete list of available methods and properties, refer to the Formik documentation.

Example

Here's an example of how to use formikRef with DynamicForm:

import React, { useRef } from 'react';
import DynamicForm, { FormField, FormikRef } from 'express-react-form';

const MyFormComponent: React.FC = () => {
  const formRef = useRef<FormikRef>(null);

  const formData: FormField[] = [
    // ... your form fields
  ];

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

  const handleExternalSubmit = () => {
    formRef.current?.submitForm();
  };

  return (
    <div>
      <DynamicForm
        formikRef={formRef}
        formData={formData}
        onSubmitFun={handleSubmit}
      />
      <button onClick={handleExternalSubmit}>External Submit</button>
    </div>
  );
};

export default MyFormComponent;

In this example, the handleExternalSubmit function demonstrates how to trigger form submission from outside the DynamicForm component using the formikRef.

🎛️ Customization

Tailor your form to perfection:

📄 License

React Dynamic Form is MIT licensed.

Ready to craft amazing forms? Get started with React Dynamic Form today! 🎉