No idea how to use?

[leefsmp]

Hi, could you add a more verbose example? I have no idea how to use this component in my app, here is my attempt but doesn't work:

const GridContainer = (props) => {
   return (
     <DndProvider backend={HTML5Backend}>
       <GridProvider items={props.items}>
         <GridContent {...props}/>
       </GridProvider>
     </DndProvider>
   )
}

export default withDndContext(GridContainer);

Thanks!

[headwindz]

hi @leefsmp . It's supposed to wrap the component down in the component tree where the components up the tree may have already used DndContext.

const _GridContent = withDndContext(GridContent)
const GridContainer = (props) => {
   return (
     <DndProvider backend={HTML5Backend}>
       <GridProvider items={props.items}>
         <_GridContent {...props}/> // parent component DndProvider has set up DnDContext
       </GridProvider>
     </DndProvider>
   )
}

export default GridContainer;

i.e. apply withDndContext HOC to the inner component rather than the outer component