React-dnd component library


I am trying to create a react component library that uses react-dnd as a peer dependency.

In my application, that imports the library and its components, the components are wrapped in a DND Provider.

When I run it I get

Expected drag drop context

So it is as if the provider context is not available in the component in the package.

It works if I use a component created in the local application.

So the project structure looks like

package.json (With react, react-dnd and html5backend as dev dependencies)
  /src/index.js (This imports component.js and wraps it in a dnd-provider)
  /package/package.json
  /package/component.js <-- The context is not available in this component

This is the code in the app

const App = () => {
  return (
    <DndProvider backend={HTML5Backend}>
      <SortedList data={json} />
    </DndProvider>
  )
}

This is the component code

export function SortedListItem(props){

  const { data } = props
  const [{ opacity }, dragRef] = useDrag(
      () => ({
        type: "CARD",
        item: "1",
        collect: (monitor) => ({
          opacity: monitor.isDragging() ? 0.5 : 1
        })
      }),
      []
    )
  return (
      <div ref={dragRef} >
          <li>{data.name}</li>
          {props.children}
      </div>
  )
}

If the component is part of my tree, why is the context not available if the top level of the tree is wrapped?

Source: React – Stack Overflow

November 27, 2021
Category : News
Tags: react-context | react-dnd | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.