Using React DnD with styled components.

[joetidee]

I need to use React DnD with styled components.

I raised this question on stackoverflow, but have also posted this issue here in the hope of obtaining an answer:
https://stackoverflow.com/questions/50220622/how-to-use-react-dnd-with-styled-component

[Rinaldo]

Edit: thanks to @zainfathoni for the suggestion to remove findDOMNode

I recently ran into this issue myself and found that Dan answered this question a while ago. I adapted his solution to Semantic UI using its Ref component.

Here's an example with Semantic UI

import React from 'react'
import { Item, Ref } from 'semantic-ui-react'
import { DragSource } from 'react-dnd'

const MyItem = props => (
    <Item>
        <Item.Content>
            <Item.Header>{props.header}<Item.Header>
            <Item.Content>{props.content}<Item.Content>
        </Item.Content>
    </Item>
)

const DraggableItem = props => {
  const { connectDragSource } = props
  return (
    <Ref innerRef={instance => connectDragSource(instance)}>
      <MyItem {...props} />
    </Ref>
  )
}

export default DragSource(...)(DraggableItem)

[zainfathoni]

You can just use Styled Component's innerRef to get the underlying DOM node, then you can call your connectDragSource to it.

Apparently you don't need ReactDOM's findDOMNode() at all in Styled Components, because the innerRef already gives you the actual underlying DOM node.

In your case, it should be like this:

class MyComponent extends Component {
...
    render() {
        const { connectDragSource } = this.props;
        return (
            <StyledComponent
                innerRef={instance => connectDragSource(instance)}
            />
        )
    }
}

You can also look at my implementation of Knight component for the official chess tutorial as a reference.
It is also accessible through CodeSandbox.

[artooras]

I have a similar use case, only inside of a styled-component I use an Icon component from react-fontawesome, like so:

const Container = styled.li`...`
const DragHandle = styled(FontAwesomeIcon).attrs({...})`...`

function Task(props) {
  return (
    <Container innerRef={instance => connectDropTarget(connectDragPreview(instance))}>
    <DragHandle innerRef={instance => connectDragSource(instance)} />
}

Using the techique suggested by @zainfathoni above works well on the Container component which is based on a native li tag. However, using it on DragHandle which is based on FontAwesomeIcon gives me the following error:

TypeError: node.setAttribute is not a function

Any ideas how I can 'dig down' to the native span tag that fontawesome renders?

[darkowic]

@artooras you probably have solved your problem until now but here is the solution - #347 (comment)

ref={instance => {
  connectDragSource(instance);
  connectDropTarget(instance);
}}

[rzkhosroshahi]

@darkowic
How can I use new Ref react API to solve this problem?

[darkowic]

@rzkhosroshahi what do you exactly mean?

[rzkhosroshahi]

@darkowic
I wanna use custom component inside React DnD, but in new ref React API you cant use ref props as a callback function, like thisref={instance => { connectDragSource(instance); connectDropTarget(instance); }}.
my question is that how do like this snippet code for new ref.

[zainfathoni]

@rzkhosroshahi
Do you mean this createRef API?

I think we can't use that API for this.
Anyway, there's no plan to remove the callback API, so you can still use the callback API for this.

Just as they noted in the createRef API docs:

Callback refs will continue to be supported in addition to the new createRef API.
You don’t need to replace callback refs in your components. They are slightly more flexible, so they will remain as an advanced feature.

[darkowic]

I would like to add that styled components in version 4 passes original ref via React.forwardRef to original component. So, probably styled components may be used the same way like normal DOM elements with react dnd. I didn't check it yet pt., 26 paź 2018, 22:52 użytkownik Zain Fathoni <notifications@github.com> napisał:

…

@rzkhosroshahi <https://github.com/rzkhosroshahi> Do you mean this createRef API <https://reactjs.org/blog/2018/03/29/react-v-16-3.html#createref-api>? I think we can't use that API for this. Anyway, there's no plan to remove the callback API, so you can still use the callback API for this. Just as they noted in the createRef API docs: Callback refs will continue to be supported in addition to the new createRef API. You don’t need to replace callback refs in your components. They are slightly more flexible, so they will remain as an advanced feature. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1021 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AK-jNfM0ShyfqQdjt7nGS4uw0Zd_5kAqks5uo3X2gaJpZM4T1fRp> .

[ViggoV]

<StyledComp ref={instance => connectDragSource(instance)} />

works flawlessly for me, EXCEPT it seems to completely break PropTypes as described in my SO question here...

It think it must be something with the refs, since I have several other components which uses one or the other as well as a few which combines the two using native DOM element wrappers..

[rzkhosroshahi]

<StyledComp ref={instance => connectDragSource(instance)} />

works flawlessly for me, EXCEPT it seems to completely break PropTypes as described in my SO question here...

It think it must be something with the refs, since I have several other components which uses one or the other as well as a few which combines the two using native DOM element wrappers..

Is that work in production? I used this approach but when I building project my component is not dragged anymore.

[ViggoV]

@rzkhosroshahi Minification seems to break it. It's not in production yet, so I haven't found a solution, but as long as i set minimize: false under optimization in my webpack config it works.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Raduuu]

I have the same problem. My question is, does it work when we're using react-dnd with their hooks ( useDrag and useDrop) and not decorators?

Thanks