ashish-form

A powerful, reusable React form component with built-in API integration, error handling, and dynamic form field support.

Features

• Dynamic form field generation
• Automatic API integration (POST, PUT, DELETE)
• Built-in loading and error states
• Support for checkbox fields with multiple options
• Customizable styling
• Flexible callback handling

Installation

npm install ashish-form

Usage

Basic Usage

import Form from 'ashish-form';

const MyComponent = () => {
  const formData = [
    { 
      id: 1,
      label: 'Name', 
      name: 'name', 
      type: 'text',
      required: true 
    },
    { 
      id: 2,
      label: 'Email', 
      name: 'email', 
      type: 'email',
      required: true 
    }
  ];

  return (
    <Form
      FORMDATA={formData}
      PostAPI="/api/submit"
      onSuccess={(data) => console.log('Success:', data)}
      onError={(error) => console.log('Error:', error)}
    />
  );
};

Advanced Usage with Checkboxes

import Form from 'ashish-form';
import CustomCheckbox from './CustomCheckbox';

const AdvancedForm = () => {
  const formData = [
    { 
      id: 1,
      label: 'Interests', 
      name: 'interests', 
      type: 'checkbox',
      options: [
        { label: 'Sports', value: 'sports' },
        { label: 'Music', value: 'music' },
        { label: 'Reading', value: 'reading' }
      ]
    }
  ];

  return (
    <Form
      FORMDATA={formData}
      PostAPI="/api/submit"
      CheckboxComponent={CustomCheckbox}
      onSuccess={(data) => console.log('Success:', data)}
    />
  );
};

Props

Form Props

| Prop | Type | Description | Default | |------|------|-------------|---------| | FORMDATA | Array | Array of form field configurations | Required | | PostAPI | string | API endpoint for creating new items | '' | | UPDATEAPI | string | API endpoint for updating existing items | '' | | DELETEAPI | string | API endpoint for deleting items | '' | | ClassName | string | Custom CSS class for the form | '' | | BtnClassName | string | Custom CSS class for submit/update button | 'bg-blue-500 text-white p-2 rounded' | | labelClassName | string | Custom CSS class for form labels | '' | | MainDivClass | string | Custom CSS class for main form container | 'flex flex-row' | | onSuccess | function | Callback function on successful submission | undefined | | onError | function | Callback function on submission error | undefined | | initialData | object | Initial form data for editing existing items | {} | | CheckboxComponent | React.Component | Custom checkbox component for checkbox fields | undefined |

Form Field Configuration

| Property | Type | Description | Required | |----------|------|-------------|----------| | id | number/string | Unique identifier for the field | Yes | | label | string | Label text for the field | Yes | | name | string | Input name attribute | Yes | | type | string | Input type (text, email, checkbox, etc.) | Yes | | required | boolean | Whether the field is required | No | | placeholder | string | Placeholder text for the input | No | | options | Array | Options for checkbox fields | No (required for checkbox) |

Error Handling

The component provides built-in error handling:

• Displays error messages from API responses
• Supports custom error callback
• Disables submit button during loading

Styling

The form uses Tailwind CSS classes by default. You can customize styling using the various className props.

License

ISC