{"_id":"@daveyplate/tailwind-drag-dropzone","_rev":"8-48e7908da927ec90be240f0aebdc845f","name":"@daveyplate/tailwind-drag-dropzone","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.0":{"name":"@daveyplate/tailwind-drag-dropzone","version":"1.0.0","keywords":["react","tailwind","tailwindcss","drag","drop","zone","dropzone","file","upload"],"author":{"name":"LeakedDave"},"license":"ISC","_id":"@daveyplate/tailwind-drag-dropzone@1.0.0","maintainers":[{"name":"leakeddave","email":"leakeddave@me.com"}],"homepage":"https://github.com/daveyplate/tailwind-drag-dropzone","dist":{"shasum":"528331a1bc278dccf2cebbd160727585f9f9ee07","tarball":"https://registry.npmjs.org/@daveyplate/tailwind-drag-dropzone/-/tailwind-drag-dropzone-1.0.0.tgz","fileCount":8,"integrity":"sha512-+AV3+BbVM4EzFMf4nS4snP64C11cTrds+mPNqr/4kjIARKsSeZYqWXWwOt/NcGQJiQTlnj2ZbwSGXM6M6+YRLg==","signatures":[{"sig":"MEUCIQD33uWipnCDC9GZBIvpuhuAkC0r6pih3RsiV115qQP8wQIgdZlSBOUSWjAUmGevL36LIgKh6EWeFGkVgxlusnmMUYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15524},"types":"dist/index","module":"dist/index","gitHead":"837e4489099f50659dc2e958c3bedead065cdb42","scripts":{"build":"babel src --out-dir dist && npx tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"leakeddave","email":"leakeddave@me.com"},"_npmVersion":"10.2.4","description":"Wraps any component with a drag and drop zone for file uploads","directories":{},"_nodeVersion":"20.11.0","dependencies":{"clsx":"^2.1.1","react-dropzone":"^14.2.9","tailwind-merge":"^2.5.2","@heroicons/react":"^2.1.5"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.25.7","typescript":"^5.6.2","@babel/core":"^7.25.7","@types/react":"^18.3.11","@babel/preset-env":"^7.25.7","@babel/preset-react":"^7.25.7"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/tailwind-drag-dropzone_1.0.0_1727942776027_0.5180914488085206","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@daveyplate/tailwind-drag-dropzone","version":"1.0.1","keywords":["react","tailwind","tailwindcss","drag","drop","zone","dropzone","file","upload"],"author":{"name":"LeakedDave"},"license":"ISC","_id":"@daveyplate/tailwind-drag-dropzone@1.0.1","maintainers":[{"name":"leakeddave","email":"leakeddave@me.com"}],"homepage":"https://github.com/daveyplate/tailwind-drag-dropzone","dist":{"shasum":"89cf88293d892219334e439fb4b5e611e9e05de9","tarball":"https://registry.npmjs.org/@daveyplate/tailwind-drag-dropzone/-/tailwind-drag-dropzone-1.0.1.tgz","fileCount":8,"integrity":"sha512-jQlP+GBxU0ffbjzrPv8EnutKWPoSaPEpGCqmCrAo13rU+ucHSfOZpqdO8f8PqTZCURTuPjmGDJhSDZbpETKp0Q==","signatures":[{"sig":"MEQCIHu+cCEfYI9omBP+TM+JHG55e+t898aKzm5XrcHlt0NdAiAtz7ytc2apJVuPqWpSOhQxmnwfSNRvLWU+OSvUKynruA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15500},"types":"dist/index","module":"dist/index","gitHead":"1722b0daabc3e074ff9bb9db1b95cc9eeb50b3b5","scripts":{"build":"babel src --out-dir dist && npx tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"leakeddave","email":"leakeddave@me.com"},"_npmVersion":"10.2.4","description":"Wraps any component with a drag and drop zone for file uploads","directories":{},"_nodeVersion":"20.11.0","dependencies":{"clsx":"^2.1.1","react-dropzone":"^14.2.9","tailwind-merge":"^2.5.2","@heroicons/react":"^2.1.5"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.25.7","typescript":"^5.6.2","@babel/core":"^7.25.7","@types/react":"^18.3.11","@babel/preset-env":"^7.25.7","@babel/preset-react":"^7.25.7"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/tailwind-drag-dropzone_1.0.1_1727947179930_0.8318629636062698","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@daveyplate/tailwind-drag-dropzone","version":"1.0.2","keywords":["react","tailwind","tailwindcss","drag","drop","zone","dropzone","file","upload"],"author":{"name":"LeakedDave"},"license":"ISC","_id":"@daveyplate/tailwind-drag-dropzone@1.0.2","maintainers":[{"name":"leakeddave","email":"leakeddave@me.com"}],"homepage":"https://github.com/daveyplate/tailwind-drag-dropzone","dist":{"shasum":"ff77387881f241989f4e4102703f099654868461","tarball":"https://registry.npmjs.org/@daveyplate/tailwind-drag-dropzone/-/tailwind-drag-dropzone-1.0.2.tgz","fileCount":8,"integrity":"sha512-30PZud9uAtqw11zF31NALqRKEb03GyBINm7R2+0AZtsrX3fuSOZhIzx3wCBTsrn/jqP33m16VSNe2LVmt5gVFg==","signatures":[{"sig":"MEYCIQColjmJTrff+U/J91g4sRenQ/RVnzvA0Ra0EJ5OsCrUCAIhAIfF3GMyTu+Ff7ecjwvu4kjkL/Xff+xDQwvRcxqnFf+q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15516},"types":"dist/index","module":"dist/index","gitHead":"7725ecc92083ffe80a30d93367815068c3718834","scripts":{"build":"babel src --out-dir dist && npx tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"leakeddave","email":"leakeddave@me.com"},"_npmVersion":"10.5.0","description":"Wraps any component with a drag and drop zone for file uploads","directories":{},"_nodeVersion":"20.12.0","dependencies":{"clsx":"^2.1.1","react-dropzone":"^14.2.9","tailwind-merge":"^2.5.2","@heroicons/react":"^2.1.5"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.25.7","typescript":"^5.6.2","@babel/core":"^7.25.7","@types/react":"^18.3.11","@babel/preset-env":"^7.25.7","@babel/preset-react":"^7.25.7"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/tailwind-drag-dropzone_1.0.2_1728271870819_0.018802468562252095","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@daveyplate/tailwind-drag-dropzone","version":"1.0.3","keywords":["react","tailwind","tailwindcss","drag","drop","zone","dropzone","file","upload"],"author":{"name":"LeakedDave"},"license":"ISC","_id":"@daveyplate/tailwind-drag-dropzone@1.0.3","maintainers":[{"name":"leakeddave","email":"leakeddave@me.com"}],"homepage":"https://github.com/daveyplate/tailwind-drag-dropzone","dist":{"shasum":"fae0b85786dac1696c69deca4b4f6a21e0c3fdeb","tarball":"https://registry.npmjs.org/@daveyplate/tailwind-drag-dropzone/-/tailwind-drag-dropzone-1.0.3.tgz","fileCount":8,"integrity":"sha512-+5FcjOK8fK4TIjXBKlW3gOWVxpgav7jFKOgeRbhVPqUX7J4NNrSn8AkT2Ti9kIU4HWk4Qe0paPdx1o0IQ32dVQ==","signatures":[{"sig":"MEUCIAvWEMpEEQ61lMxtiq6e1AkvaSZDDVsAu+Btv7kUxsDPAiEAg1DW23U64JUJRRAbYpCkx/i35BTmtp6akBOOF8+VVEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15521},"types":"dist/index","module":"dist/index","gitHead":"78c24078c9e866ed6bb70d77613505d482a3e601","scripts":{"build":"babel src --out-dir dist && npx tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"leakeddave","email":"leakeddave@me.com"},"_npmVersion":"10.9.0","description":"Wraps any component with a drag and drop zone for file uploads","directories":{},"_nodeVersion":"22.12.0","dependencies":{"clsx":">=2.1.1","react-dropzone":"^14.2.9","tailwind-merge":">=2.5.2","@heroicons/react":">=2.1.5"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.25.7","typescript":"^5.6.2","@babel/core":"^7.25.7","@types/react":"^18.3.11","@babel/preset-env":"^7.25.7","@babel/preset-react":"^7.25.7"},"peerDependencies":{"react":">=18.3.1","react-dom":">=18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/tailwind-drag-dropzone_1.0.3_1733511650889_0.6950962650379318","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"@daveyplate/tailwind-drag-dropzone","version":"1.0.4","keywords":["react","tailwind","tailwindcss","drag","drop","zone","dropzone","file","upload"],"author":{"name":"LeakedDave"},"license":"ISC","_id":"@daveyplate/tailwind-drag-dropzone@1.0.4","maintainers":[{"name":"leakeddave","email":"leakeddave@me.com"}],"homepage":"https://github.com/daveyplate/tailwind-drag-dropzone","dist":{"shasum":"40a909f28ccefe44bff2469e4770e19f3172db81","tarball":"https://registry.npmjs.org/@daveyplate/tailwind-drag-dropzone/-/tailwind-drag-dropzone-1.0.4.tgz","fileCount":8,"integrity":"sha512-lEBLK3kg53QxjP8pXL7zt2KBevJLM6YK0RSQuINJ8uRl1l8JQiAJJB3amcVE/4+mypKS1G+/fsUAfnFeAgqljw==","signatures":[{"sig":"MEYCIQDpGgT1wQq+i3Rd+NjMdbPPLI/ijdh64hg9G1j7xzMQgAIhAKEuJwwLn73abgNe8QqxLWYpoXGLjCudJBWRhqclk1dl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15520},"types":"dist/index","module":"dist/index","gitHead":"a681ae35fa564b4a37270b491e87d0acb8970a9c","scripts":{"build":"babel src --out-dir dist && npx tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"leakeddave","email":"leakeddave@me.com"},"_npmVersion":"10.9.0","description":"Wraps any component with a drag and drop zone for file uploads","directories":{},"_nodeVersion":"22.12.0","dependencies":{"clsx":">=2.1.1","react-dropzone":"^14.2.9","tailwind-merge":">=2.5.2","@heroicons/react":">=2.1.5"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.25.7","typescript":"^5.6.2","@babel/core":"^7.25.7","@types/react":"^19.0.1","@babel/preset-env":"^7.25.7","@babel/preset-react":"^7.25.7"},"peerDependencies":{"react":">=18.3.1","react-dom":">=18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/tailwind-drag-dropzone_1.0.4_1733511893320_0.3541423860382349","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"@daveyplate/tailwind-drag-dropzone","version":"1.0.5","keywords":["react","tailwind","tailwindcss","drag","drop","zone","dropzone","file","upload"],"author":{"name":"daveycodez"},"license":"ISC","_id":"@daveyplate/tailwind-drag-dropzone@1.0.5","maintainers":[{"name":"leakeddave","email":"leakeddave@me.com"}],"homepage":"https://github.com/daveyplate/tailwind-drag-dropzone","dist":{"shasum":"d9bf2fe90afd7a17823275203bc056ace8105d89","tarball":"https://registry.npmjs.org/@daveyplate/tailwind-drag-dropzone/-/tailwind-drag-dropzone-1.0.5.tgz","fileCount":9,"integrity":"sha512-gGx+07Hj2TfMNjK/2YS/ldHBBMK/uk/qsoa4hmy2kH+vgMaAyCMD7D/TLAoeNSNRqFPuIzpuruvWqAAnTYMZIQ==","signatures":[{"sig":"MEYCIQD6Kg48xr5UHYLPzwALw0v756sa72tHWJ/ZPHyEJFkdWwIhAMA0ic3YKSXlLQkHZV0uFZYYx3DGt5Qmq08kpMd3AwMp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86776},"types":"dist/index","module":"dist/index","gitHead":"315fb3fcec6e527e7f0be718161c1ef6e89ffd08","scripts":{"dev":"tsc --watch","build":"tsc","prepublishOnly":"rm -rf dist && npm run build"},"_npmUser":{"name":"leakeddave","email":"leakeddave@me.com"},"_npmVersion":"10.9.0","description":"Wraps any component with a drag and drop zone for file uploads","directories":{},"_nodeVersion":"22.12.0","dependencies":{"clsx":">=2.1.1","react-dropzone":"^14.2.9","tailwind-merge":">=2.5.2","@heroicons/react":">=2.1.5"},"_hasShrinkwrap":false,"devDependencies":{"react":"file:../daveyplate/node_modules/react","react-dom":"file:../daveyplate/node_modules/react-dom","typescript":"^5.6.2","@types/react":"^19.0.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwind-drag-dropzone_1.0.5_1733789748855_0.6836751624720374","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@daveyplate/tailwind-drag-dropzone","version":"1.0.6","keywords":["react","tailwind","tailwindcss","drag","drop","zone","dropzone","file","upload"],"author":{"name":"daveycodez"},"license":"ISC","_id":"@daveyplate/tailwind-drag-dropzone@1.0.6","maintainers":[{"name":"leakeddave","email":"leakeddave@me.com"}],"homepage":"https://github.com/daveyplate/tailwind-drag-dropzone","dist":{"shasum":"2baffe931f1eba8ef359091aaab0a8fa1e4b21ad","tarball":"https://registry.npmjs.org/@daveyplate/tailwind-drag-dropzone/-/tailwind-drag-dropzone-1.0.6.tgz","fileCount":9,"integrity":"sha512-hMHRrD3nlptkWcDgLHDywu5/J7cgKTQFTboeEtk2nOQe/iQ0MD1Fg8tDRDqMaCX4h208XT8HOSEGZ3LqWpc5vw==","signatures":[{"sig":"MEUCIQC+C6izwIrXmxYCxNJly+h/Py31KzJszoi3HuYwtWW9+AIgV/ZFrnWoqKrqnqT8Hsebn3JABtN9H1VlBQSN11WBCv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86913},"types":"dist/index","module":"dist/index","gitHead":"810bd0cb2fcbcf2f413af75feb8dacb1b501149d","scripts":{"dev":"tsc --watch","build":"tsc","prepublishOnly":"rm -rf dist && npm run build"},"_npmUser":{"name":"leakeddave","email":"leakeddave@me.com"},"_npmVersion":"10.9.0","description":"Wraps any component with a drag and drop zone for file uploads","directories":{},"_nodeVersion":"22.11.0","dependencies":{"clsx":">=2.1.1","react-dropzone":"^14.2.9","tailwind-merge":">=2.5.2","@heroicons/react":">=2.1.5"},"_hasShrinkwrap":false,"devDependencies":{"react":"file:../daveyplate/node_modules/react","react-dom":"file:../daveyplate/node_modules/react-dom","typescript":"^5.6.2","@types/react":"^19.0.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwind-drag-dropzone_1.0.6_1733833807383_0.680401344138208","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2024-10-03T08:06:15.913Z","modified":"2025-11-21T03:13:11.443Z","1.0.0":"2024-10-03T08:06:16.205Z","1.0.1":"2024-10-03T09:19:40.115Z","1.0.2":"2024-10-07T03:31:10.983Z","1.0.3":"2024-12-06T19:00:51.106Z","1.0.4":"2024-12-06T19:04:53.513Z","1.0.5":"2024-12-10T00:15:49.054Z","1.0.6":"2024-12-10T12:30:07.592Z"},"author":{"name":"daveycodez"},"license":"ISC","homepage":"https://github.com/daveyplate/tailwind-drag-dropzone","keywords":["react","tailwind","tailwindcss","drag","drop","zone","dropzone","file","upload"],"description":"Wraps any component with a drag and drop zone for file uploads","maintainers":[{"email":"leakeddave@me.com","name":"leakeddave"},{"email":"daveycodez@gmail.com","name":"daveycodez"}],"readme":"Certainly! Here's how the `README.md` content would look in a markdown format:\n\n# DragDropzone Component\n\nThe `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. \n\n## Installation\n\n```bash\nnpm install @daveyplate/tailwind-drag-dropzone\n```\n\nEnsure you have Tailwind CSS configured properly in your project.\n\n## Usage\n\n```jsx\nimport { DragDropzone } from '@daveyplate/tailwind-drag-dropzone'\n\nfunction App() {\n    const openRef = React.useRef()\n\n    const handleFiles = (files) => {\n        console.log('Files:', files)\n        // Handle file processing here\n    }\n\n    const handleError = (error) => {\n        console.error('Error:', error)\n        // Handle error processing here\n    }\n\n    return (\n        <div className=\"App\">\n            <DragDropzone\n                size=\"md\"\n                label=\"Upload Files\"\n                openRef={openRef}\n                accept={{ 'image/*': [] }}\n                maxFiles={3}\n                onFiles={handleFiles}\n                onError={handleError}\n            >\n                <div>Drag your files here or click to upload.</div>\n            </DragDropzone>\n        </div>\n    )\n}\n```\n\n### Component Props\n\n- **children**: JSX elements to be rendered inside the dropzone.\n- **size**: Optional. Defines the size of the icon and text. Options include \"sm\", \"md\", \"lg\", \"xl\". Default is \"md\".\n- **className**: Optional. Additional class names for custom styling.\n- **label**: Optional. The label/message displayed when dragging files. Default is \"Upload File\".\n- **openRef**: Reference to manually open the file dialog.\n- **accept**: Optional. Accepted file types, structured as per the `react-dropzone` format. Default accepts all images.\n- **maxFiles**: Optional. The maximum number of files that can be dropped at once. Default is 1.\n- **onFiles**: Callback fired when files are correctly dropped. Receives an array of `File` objects.\n- **onError**: Callback fired when there is an error during the upload process. Receives an `error` object.\n\n## Functionality\n\n- **Drag and Drop**: Users can drag files over the zone and drop them to trigger the file handling process.\n- **Click to Open**: Users can click inside the zone to open a file explorer dialog for selecting files.\n- **Custom Styling & Size**: The component can be easily styled with additional class names and size variations.\n- **File Acceptance & Limits**: Define the type and number of files allowed for upload.\n- **Error Handling**: Captures and handles errors that arise from using unsupported file types or exceeding file limits.\n\n## License\n\nThis module is open-source and available under the ISC License.\n\n## Contributions\n\nContributions, issues, and feature requests are welcome! Please feel free to check the issues page if you have questions or suggestions.\n\n---\n\nWith 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!\n","readmeFilename":"README.md"}