{"_id":"@adrianfernandez/react-content-drop","name":"@adrianfernandez/react-content-drop","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@adrianfernandez/react-content-drop","author":{"name":"adrian-fernandez"},"version":"1.0.0","description":"React content drop forked from react-file-drop","main":"FileDrop.js","types":"FileDrop.d.ts","scripts":{"build":"rm -rf dist && mkdir dist && cp -v ./package*.json ./src/index.js ./dist/ && tsc --project .","format":"prettier --check '**/*.{js,jsx,ts,tsx,json,htm,html}'","format:fix":"prettier --write '**/*.{js,jsx,ts,tsx,json,htm,html}'","lint":"eslint . --ext .ts,.tsx,.js,.jsx","lint:fix":"eslint . --ext .ts,.tsx,.js,.jsx --fix","start":"npm run build -- -w"},"keywords":["react file gmail","react file facebook","react file upload","react file drag drop","lightweight","react","react dropzone","react-file-drop","gmail","facebook","dropzone","upload","drag","drop","drag and drop","drag n drop","file","window","document","zero dependency"],"repository":{"type":"git","url":"git+https://github.com/adrian-fernandez/react-content-drop.git"},"license":"MIT","bugs":{"url":"https://github.com/adrian-fernandez/react-content-drop/issues"},"homepage":"https://github.com/adrian-fernandez/react-content-drop#readme","dependencies":{"prop-types":"^15.7.2"},"peerDependencies":{},"devDependencies":{"@types/prop-types":"^15.7.3","@types/react":"^16.9.30","@types/react-dom":"^16.9.5","@typescript-eslint/eslint-plugin":"^2.26.0","@typescript-eslint/parser":"^2.26.0","eslint":"^6.8.0","eslint-plugin-import":"^2.20.2","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^3.0.0","prettier":"^2.0.2","typescript":"^3.8.3"},"_id":"@adrianfernandez/react-content-drop@1.0.0","gitHead":"48056709ef4c6aff2501d9fbccbe72bb21c5a870","_nodeVersion":"20.10.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-OXxo/QN9aQBcm/Ey/8LCLTvlOSBh3uu7uKIMLF0CUHyCryx92DpVO+2XWSWzjbnhQBvAgPvEeSBEy5U3vhL4pQ==","shasum":"bcc82ab825c90a750c2cd6c0c3a6b6e3780e6cf6","tarball":"https://registry.npmjs.org/@adrianfernandez/react-content-drop/-/react-content-drop-1.0.0.tgz","fileCount":23,"unpackedSize":370767,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICLeAMdj2K3QaCJ+hMsKw+z7UQ4fqTKCQXwFAU/4Bzw6AiEAmNzi1L9vshelmcR4DMXyyv/56raTPrkBUtMKIleHzm4="}]},"_npmUser":{"name":"adrianfernandez","email":"adrianfernandez85@gmail.com"},"directories":{},"maintainers":[{"name":"adrianfernandez","email":"adrianfernandez85@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-content-drop_1.0.0_1727079442593_0.5776664277201"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-23T08:17:22.508Z","1.0.0":"2024-09-23T08:17:22.814Z","modified":"2024-09-23T08:17:23.041Z"},"maintainers":[{"name":"adrianfernandez","email":"adrianfernandez85@gmail.com"}],"description":"React content drop forked from react-file-drop","homepage":"https://github.com/adrian-fernandez/react-content-drop#readme","keywords":["react file gmail","react file facebook","react file upload","react file drag drop","lightweight","react","react dropzone","react-file-drop","gmail","facebook","dropzone","upload","drag","drop","drag and drop","drag n drop","file","window","document","zero dependency"],"repository":{"type":"git","url":"git+https://github.com/adrian-fernandez/react-content-drop.git"},"author":{"name":"adrian-fernandez"},"bugs":{"url":"https://github.com/adrian-fernandez/react-content-drop/issues"},"license":"MIT","readme":"# react-file-drop\n\nZero dependency React component for Gmail or Facebook -like drag and drop file uploader. Drag files anywhere onto the window (or user defined 'frame' prop)! Very extensible, provides a hook for every event so you can use it to develop any custom behavior that you want.\n\n### V3 is out! See the [changelog](https://github.com/sarink/react-file-drop/blob/master/CHANGELOG.md)\n\n## Demo\n\nhttps://sarink.github.io/react-file-drop - A very simple live demo with example code and sample CSS\n\n## Why?\n\nI wanted that behavior that facebook, gmail, etc. have where a part of the page highlights immediately when you start dragging a file anywhere on the window. I couldn't find any React component that already did this, so, I made one!\n\n## Dependencies\n\nNone! (well, just `prop-types`, but that should already be removed from your prod bundle anyway)\n\n## Browser support\n\n✅ Chrome <br/>\n✅ Firefox <br/>\n✅ Safari <br/>\n✅ IE 11 <br/>\n✅ IE Edge <br/>\n\n## Installation\n\n`npm install --save react-file-drop`\n\n## Usage\n\n`import { FileDrop } from 'react-file-drop'`\n\n## How it works\n\nFirst, you define the `frame` prop (default is the `document`), whenever the user begins dragging file(s) anywhere over this frame, the `target` will get a `file-drop-dragging-over-frame` class name, and the `onFrameDragEnter` callback will fire.\n\nNext, define an `onDrop` prop, whenever a user drops their files onto the `target`, this callback will be triggered.\n\nLastly, you'll need to style it.\n\nYou can also define an `onTargetClick` prop if you want to let user browse their files from disk. Below you can find instruction how to do that.\n\n## Styling\n\nBy default, the component comes with no styles. You can grab the [demo CSS](https://raw.githubusercontent.com/sarink/react-file-drop/master/demo/src/Demo.css) to get started.\n\nFor custom class names (if you're using something like JSS) you can use the following props:\n\n- `className`\n- `targetClassName`\n- `draggingOverFrameClassName`\n- `draggingOverTargetClassName`\n\n## Classnames\n\n`.file-drop`: The outer container element\n\n`.file-drop > .file-drop-target`: This is the target the user has to drag their files to.\n\n`.file-drop > .file-drop-target.file-drop-dragging-over-frame`: This class will be added to the `target` whenever the user begins dragging a file over the `frame`, and it will be removed when they leave\n\n`.file-drop > .file-drop-target.file-drop-dragging-over-target`: This class will be added to the `target` whenever the user begins dragging a file over the `target`, and it will be removed when they leave\n\n## Props\n\n`onDrop: function(files, event)`: Callback when the user drops files onto the target\n\n`onDragOver: function(event)`: Callback when the user is dragging over the target. Also adds the `file-drop-dragging-over-target` class to the `file-drop-target`.\n\n`onDragLeave: function(event)`: Callback when the user leaves the target. Removes the `file-drop-dragging-over-target` class from the `file-drop-target`.\n\n`onTargetClick: function(event)`: Callback when the user clicks _anywhere_ on the target.\n\n`dropEffect - string \"copy\" || \"move\" || \"link\" || \"none\" (default: \"copy\")`: Learn more about [HTML5 dropEffects](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#dropEffect.28.29). Not available in IE :(\n\n`frame: document || HTMLElement (default: document)`: This is the scope or \"frame\" that the user must drag some file(s) over to kick things off.\n\n`onFrameDragEnter: function(event)`: Callback when the user begins dragging over the `frame`.\n\n`onFrameDragLeave: function(event)`: Callback when the user stops dragging over the `frame`.\n\n`onFrameDrop: function(event)`: Callback when the user drops files _anywhere_ over the `frame`.\n\n`className: string (default: \"file-drop\")`: Class given to the outer container div.\n\n`targetClassName: string (default: \"file-drop-target\")`: Class given to the target div.\n\n`draggingOverFrameClassName: string (default: \"file-drop-dragging-over-frame\")`: Class given to the target div when file is being dragged over frame.\n\n`draggingOverTargetClassName: string (default: \"file-drop-dragging-over-target\")`: Class given to the target div when file is being dragged over target.\n\n## Uploading files using click handler\n\nIn order to let user upload files with click on the `file-drop-target`, you will need to specify an `input[type=\"file\"]` somewhere in your code. You will also need a ref, that will be passed to the input, to call a `click` method on it.\n\nSteps:\n\n1. Define ref for input:\n\n```javascript\nconst fileInputRef = useRef(null);\n```\n\n2. Define input change handler:\n\n```javascript\nconst onFileInputChange = (event) => {\n  const { files } = event.target;\n  // do something with your files...\n}\n```\n\n3. Add input to your code:\n\n```html\n<input\n  onChange={onFileInputChange}\n  ref={fileInputRef}\n  type=\"file\"\n  className=\"hidden\"\n/>\n```\n\n4. Define target click handler:\n\n```javascript\nconst onTargetClick = () => {\n  fileInputRef.current.click()\n}\n```\n\n5. Add target click handler to `FileDrop` component:\n\n```html\n<FileDrop\n  onTargetClick={onTargetClick}\n```\n\n## Contributing\n\nYour PRs are welcome! To run the app locally:\n\n```\nnvm use # Probably optional, but it can't hurt\n\ncd file-drop\nnpm install\nnpm start\n\ncd demo\nnpm install\nnpm start\n```\n\nNow both the apps are running in watch mode. If you make a change to the file-drop code, you should see the demo code automatically rebuild and update in your browser.\n","readmeFilename":"README.md"}