{"id":16586161,"url":"https://github.com/romgrk/react-drop-zone","last_synced_at":"2025-03-21T12:33:48.164Z","repository":{"id":43042345,"uuid":"112649397","full_name":"romgrk/react-drop-zone","owner":"romgrk","description":"Simple, elegant \u0026 efficient drop-zone component","archived":false,"fork":false,"pushed_at":"2023-10-17T03:52:19.000Z","size":621,"stargazers_count":17,"open_issues_count":5,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-11T22:51:07.224Z","etag":null,"topics":["dropzone","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/romgrk.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-30T19:06:08.000Z","updated_at":"2024-09-23T09:23:51.000Z","dependencies_parsed_at":"2024-06-20T23:34:31.054Z","dependency_job_id":null,"html_url":"https://github.com/romgrk/react-drop-zone","commit_stats":{"total_commits":74,"total_committers":3,"mean_commits":"24.666666666666668","dds":0.1351351351351351,"last_synced_commit":"a2f82727a663a954c3652e04aea1055e89e23087"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romgrk%2Freact-drop-zone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romgrk%2Freact-drop-zone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romgrk%2Freact-drop-zone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romgrk%2Freact-drop-zone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/romgrk","download_url":"https://codeload.github.com/romgrk/react-drop-zone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221815401,"owners_count":16885168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dropzone","react"],"created_at":"2024-10-11T22:50:45.068Z","updated_at":"2024-10-28T10:10:33.912Z","avatar_url":"https://github.com/romgrk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-drop-zone\n\n\u003e Simple and easily usable\n\nThis package offers a styled version of the component or a render-function\nversion which allows you to control rendering. Both versions trigger an\n`.onDrop(file: HTML5 File, content: String)` (file reading can be disabled).  \n\n\n### Styled version ([open demo](https://stackblitz.com/edit/react-styled-drop-zone-demo))\n\n![StyledDropZone](https://raw.github.com/romgrk/react-drop-zone/master/static/styled-drop-zone.png)\n\n```jsx\nimport { StyledDropZone } from 'react-drop-zone'\nimport 'react-drop-zone/dist/styles.css'\n\n\u003cStyledDropZone\n  onDrop={(file, text) =\u003e console.log(file, text)}\n/\u003e\n```\n  \n  \n\n### Bare version ([open demo](https://stackblitz.com/edit/react-drop-zone-demo))\n\n```jsx\nimport DropZone from 'react-drop-zone'\n\n\u003cDropZone onDrop={(file, text) =\u003e console.log(file)}\u003e\n{\n  ({ over, overDocument }) =\u003e\n    \u003cdiv\u003e\n      {\n        over ?\n          'file is over element' :\n        overDocument ?\n          'file is over document' :\n          'no file'\n      }\n    \u003c/div\u003e\n}\n\u003c/DropZone\u003e\n```\n  \n  \n\n## Props\n\n| Name                | Component        | Description                                                                             | Default                        |\n| ---                 | ---              | ---                                                                                     | ---                            |\n| `accept`            | *both*           | Restricts downloads to an extension type.                                               | ---                            |\n| `multiple`          | *both*           | Allows multiple files to be selected. (disables file reading!)                          | ---                            |\n| `onDrop` (required) | *both*           | called when a file is dropped or selected. Signature: `(file: HTML5File, text: String)` |                                |\n| `handleClick`       | *both*           | Handle click events on the rendered component                                           | `true`                         |\n| `dontRead`          | *both*           | Prevents reading the file content, if it's causing problems                             | `false`                        |\n| `children`          | `DropZone`       | Render function that receives `({ over: Boolean, overDocument: Boolean})`               | `false`                        |\n| `children`          | `StyledDropZone` | Label on the component                                                                  | `Click or drop your file here` |\n\n\n### Additional API\n\nThe function `readFileAsText` is exported if you need to read a file's text content:\n\n```jsx\nimport { StyledDropZone, readFileAsText } from 'react-drop-zone'\nimport 'react-drop-zone/dist/styles.css'\n\n\u003cStyledDropZone\n  dontRead\n  onDrop={(file) =\u003e\n    !file.name.endsWith('.txt') ?\n      'Not a text file' :\n      readFileAsText(file)\n        .then(text =\u003e console.log(file, text))\n  }\n/\u003e\n```\n\n### Details\n\nThe component overwrites the `onDrag/DragEnter/.../Drop` props of the render\nfunction child.\n\n### The accept attribute\n\nIf you need more information, see here: ([open developer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Additional_attributes))\n\nThe device allows, for example, accept = \".pdf, image/*\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromgrk%2Freact-drop-zone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromgrk%2Freact-drop-zone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromgrk%2Freact-drop-zone/lists"}