A good README.md is the "front door" of your project. It needs to tell developers exactly what the package does, how to install it, and—most importantly—how to get it running in 60 seconds.

Here is a professional, well-structured README.md tailored for your @dev-codergautam/drag-dropuploader package.

@dev-codergautam/drag-dropuploader

A lightweight, zero-dependency Vanilla JavaScript library for creating beautiful drag-and-drop file upload zones with real-time image previews.

🚀 Features

• Drag & Drop Support: Seamlessly handle file drops.
• Clipboard Integration: Supports pasting images directly from the clipboard.
• Live Previews: Automatically generates and displays thumbnails for images.
• State Management: Easily retrieve the current list of files for form submission.
• Customizable: Filter by file types and hook into update events.

📦 Installation

Install the package via NPM:

npm install @dev-codergautam/drag-dropuploader

🛠 Usage

1. Vanilla JavaScript

First, create a container in your HTML:

<div id="my-uploader"></div>

Then, initialize the uploader in your JavaScript file:

import SimpleUploader from '@dev-codergautam/drag-dropuploader';
import '@dev-codergautam/drag-dropuploader/src/styles.css';

const uploader = new SimpleUploader('#my-uploader', {
  allowedTypes: ['image/jpeg', 'image/png'],
  onFilesUpdate: (files) => {
    console.log("Files updated:", files);
  }
});

// To get the files when submitting a form:
const files = uploader.getFiles();

2. React (Vite) Implementation

Since this is a DOM-based library, use the useEffect hook to initialize it.

import { useEffect } from 'react';
import SimpleUploader from '@dev-codergautam/drag-dropuploader';
import '@dev-codergautam/drag-dropuploader/src/styles.css';

export default function UploaderComponent() {
  useEffect(() => {
    const uploader = new SimpleUploader('#uploader-container', {
      onFilesUpdate: (files) => console.log(files)
    });
  }, []);

  return <div id="uploader-container"></div>;
}

⚙️ Configuration Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | allowedTypes | Array | ['image/'] | Array of MIME types or prefixes to allow. | | onFilesUpdate | Function | null | Callback function triggered whenever files are added or removed. |

📖 API Methods

| Method | Description | | --- | --- | | .getFiles() | Returns an Array of the currently selected File objects. | | .removeFile(file) | Removes a specific file object from the internal state and updates the UI. |

🎨 Custom Styling

The package comes with default styles, but you can override them in your own CSS. Key classes include:

• .upload-container: The main dropzone area.
• .drag-over: Applied to the container when a file is being hovered over it.
• .image-preview-wrapper: The wrapper for each individual image thumbnail.
• .remove-icon: The "X" button used to delete a preview.

📄 License

MIT © dev-codergautam

Pro-Tip for your GitHub:

Include a GIF or a screenshot at the top of the README! Developers love seeing the UI in action before they install a package.

Would you like me to help you write a .gitignore file so you don't accidentally upload your node_modules to GitHub?