Drag & drop

Chonky supports drag & drop (DnD) out-of-the-box. The relevant functionality is implemented using react-dnd.

Disabling DnD

If you want to disable DnD globally, you can use setChonkyDefaults:

import { setChonkyDefaults } from 'chonky';
setChonkyDefaults({
    disableDragAndDrop: true,
});

To disable DnD on a specific file browser, you can use the disableDragAndDrop prop:

<FileBrowser files={[]} disableDragAndDrop={true}>
    {/* ... */}
</FileBrowser>

"Cannot have two HTML5 backends"

For the majority of use cases, DnD will just work. However, if you want to use multiple FileBrowser instances on the same page, you will start seeing this error:

Error: Cannot have two HTML5 backends at the same time.

This happens because of the way react-dnd works. It requires a DndProvider to be present somewhere in the component tree, above the component that actually uses DnD functionality. To support this, Chonky's internal component hierarchy looks like this:

- FileBrowser
    - DnDProvider
        - ChonkyDnD

That said, react-dnd also requires that only one DnDProvider is mounted at a time, so when you have multiple file browsers in your app you start hitting problems:

const MyApp = () => {
    return (
        <React.Fragment>
            <FileBrowser files={[]} />
            <FileBrowser files={[]} />
        </React.Fragment>
    );
};

Resultant component hierarchy:

- MyApp
    - FileBrowser
        - DnDProvider
            - ChonkyDnD
    - FileBrowser
        - DnDProvider         <---- Duplicate provider!
            - ChonkyDnD

The solution is quite simple:

import { FileBrowser } from 'chonky';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
const MyApp = () => {
    return (
        <DndProvider backend={HTML5Backend}>
            <FileBrowser files={[]} disableDragAndDropProvider={true} />
            <FileBrowser files={[]} disableDragAndDropProvider={true} />
        </DndProvider>
    );
};

The code above does two things. First, it disables Chonky's internal DnDProvider by setting the disableDragAndDropProvider prop on FileBrowser to true. Second, it adds a custom DnDProvider at the top-level of the application.

Note that you don't have to use HTML5Backend, you can use any react-dnd-compatible backend that you want.