Ashish-form NPM

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)