useDrop and useDropArea

触发文件,链接删除和复制粘贴。

useDrop跟踪整个页面的事件,useDropArea跟踪特定元素的拖放事件。

Usage

useDrop:

  1. import {useDrop} from 'react-use';
  2. const Demo = () => {
  3. const state = useDrop({
  4. onFiles: files => console.log('files', files),
  5. onUri: uri => console.log('uri', uri),
  6. onText: text => console.log('text', text),
  7. });
  8. return (
  9. <div>
  10. Drop something on the page.
  11. </div>
  12. );
  13. };

useDropArea:

  1. import {useDropArea} from 'react-use';
  2. const Demo = () => {
  3. const [bond, state] = useDropArea({
  4. onFiles: files => console.log('files', files),
  5. onUri: uri => console.log('uri', uri),
  6. onText: text => console.log('text', text),
  7. });
  8. return (
  9. <div {...bond}>
  10. Drop something here.
  11. </div>
  12. );
  13. };