Certainly! Here's how the README.md content would look in a markdown format:

DragDropzone Component

The DragDropzone component is a versatile and highly customizable React component designed to allow users to drag and drop files for upload. It leverages Tailwind CSS for styling, and react-dropzone for handling the dropzone functionality.

Installation

npm install @daveyplate/tailwind-drag-dropzone

Ensure you have Tailwind CSS configured properly in your project.

Usage

import { DragDropzone } from '@daveyplate/tailwind-drag-dropzone'

function App() {
    const openRef = React.useRef()

    const handleFiles = (files) => {
        console.log('Files:', files)
        // Handle file processing here
    }

    const handleError = (error) => {
        console.error('Error:', error)
        // Handle error processing here
    }

    return (
        <div className="App">
            <DragDropzone
                size="md"
                label="Upload Files"
                openRef={openRef}
                accept={{ 'image/*': [] }}
                maxFiles={3}
                onFiles={handleFiles}
                onError={handleError}
            >
                <div>Drag your files here or click to upload.</div>
            </DragDropzone>
        </div>
    )
}

Component Props

• children: JSX elements to be rendered inside the dropzone.
• size: Optional. Defines the size of the icon and text. Options include "sm", "md", "lg", "xl". Default is "md".
• className: Optional. Additional class names for custom styling.
• label: Optional. The label/message displayed when dragging files. Default is "Upload File".
• openRef: Reference to manually open the file dialog.
• accept: Optional. Accepted file types, structured as per the react-dropzone format. Default accepts all images.
• maxFiles: Optional. The maximum number of files that can be dropped at once. Default is 1.
• onFiles: Callback fired when files are correctly dropped. Receives an array of File objects.
• onError: Callback fired when there is an error during the upload process. Receives an error object.

Functionality

• Drag and Drop: Users can drag files over the zone and drop them to trigger the file handling process.
• Click to Open: Users can click inside the zone to open a file explorer dialog for selecting files.
• Custom Styling & Size: The component can be easily styled with additional class names and size variations.
• File Acceptance & Limits: Define the type and number of files allowed for upload.
• Error Handling: Captures and handles errors that arise from using unsupported file types or exceeding file limits.

License

This module is open-source and available under the ISC License.

Contributions

Contributions, issues, and feature requests are welcome! Please feel free to check the issues page if you have questions or suggestions.

---

With this guide, you should be equipped to integrate and customize the DragDropzone component in your projects effectively. Enjoy seamless file uploads with this convenient drag-and-drop interface!