Package Exports

ashish-form
ashish-form/dist/index.esm.js
ashish-form/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ashish-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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