styled-components v4 compat about react-beautiful-dnd HOT 18 CLOSED

Thanks for reaching out

from react-beautiful-dnd.

Here is our using innerRef guide

from react-beautiful-dnd.

from react-beautiful-dnd.

Try this:

<MyStyleComponent 
- innerRef={provided.innerRef} 
+ ref={provided.innerRef}
/>

from react-beautiful-dnd.

I am a big fan of styled components and you will find that the examples all use styled components.

For styled-components, the ref prop returns the instance of the class whereas innerRef returns the underlying DOM node. So for your example to work simply change ref to innerRef 👌

Here is your example with the change made: https://www.webpackbin.com/bins/-Krh0yshtMKBmuOGhJn8

from react-beautiful-dnd.

Here is the styled components ref guide

from react-beautiful-dnd.

The updated styled-components API (v4) allows for usage of ref (no more innerRef). I tried to apply the provided innerRefs from the dnd contexts to the styled-components... it did not work. Is this something that you're digging into? Let me know if you need more details and an example (thought I'd save myself the time incase you're already working on a compatibility fix).

from react-beautiful-dnd.

@alexreardon thank you! Awesome library 👍 I enjoyed watching your egghead.io tutorial

from react-beautiful-dnd.

from react-beautiful-dnd.

I am facing some difficulties aswell implementing your great library with styled components.
Changing ref to innerRef still makes the Draggable component crash.

The exapmle on webpackbin is down. Anyway to get him back up?
My issieu is very similar to the issieur.

from react-beautiful-dnd.

Most of our stories use styled-components
https://github.com/atlassian/react-beautiful-dnd/tree/master/stories/src

from react-beautiful-dnd.

Would also welcome a better explanation of refs - in my case, it either crashes (draggableRef.hasAttribute is not a function) or doesn't see the ref. Things get more complicated with another wrapper layer that comes from the posed animation library.

from react-beautiful-dnd.

I have not looked into this. My initial take is that you should just be able to use the ref prop on a styled-component

I could try to take a look later

from react-beautiful-dnd.

@alexreardon here's what I'm currently working with: the repo

I'd really appreciate if you––when you have a moment––would take a glance & let me know if anything strikes you as blatantly incorrect.

Thank you!

from react-beautiful-dnd.

@alexreardon what's the word?

from react-beautiful-dnd.

Didn't work. I've tried with both innerRef & ref –– if you want to take a look at what I'm working with, it's here.

from react-beautiful-dnd.

from react-beautiful-dnd.

Ahhhh, it works!!!!!!!!!!!

Thank you so much & sorry for not seeing it :)

from react-beautiful-dnd.