I'm wondering how I would go about using React DND with React Sizable (and also React-SortableJS but that's not causing an issue). I get the initial HTML5 Backend with import { HTML5Backend } from 'react-dnd-html5-backend'; In that file, I use it with <DndProvider backend={HTML5Backend}> Inside of the drop element of the DndProvider, I also have a <ReactSortable> component that holds a <ResizableBox> box. To reiterate, I have a drag and drop with the drop element being sortable with React-SortableJS. The dropped elements need to be resizable.
<ReactSortable
style={{width: '100%', display: 'flex', flexWrap: 'wrap'}}
setList={(e) => {
const componentIndex = props.currentPageObject.components.findIndex((comp) => comp._id === props.component._id);
if (JSON.stringify(props.currentPageObject.components[componentIndex].sub_components) !== JSON.stringify(e)) {
props.setCurrentPageObject((prev) => ({...prev, components: [...prev.components.map((comp) => {
if(comp._id === props.component._id) {
return {...comp, sub_components: e}
} else {
return comp;
}
})]}))
}
}}
list={props.component.sub_components}
direction="horizontal"
disabled={false}
>
{props.component.sub_components.length > 0 && props.component.sub_components.map((comp, index) => {
return (
<>
<ResizableBox width={200} height={200} >
<span>{comp.key}</span>
</ResizableBox>
</>
)
})}
</ReactSortable>
The drag and drop and sorting works, but when I add in the resizable, I get this error:
Error: Cannot have two HTML5 backends at the same time.
Since the doesn't take in an HTML5Backend as a prop, is there a way around this?
Thanks!