ref doesn't work on <swipeable>

[DrBoria]

Can't use ref on swipeable container. Ref links not to dom node, but on swipeable component.

[hartzis]

@DrBoria nice find and thank you for creating an issue. I'm surprised this is the first time someone has mentioned and asked for ref's. This is definitely doable!

We have a few options:

• use a prop like innerRef like style-components and formsy-react do?
  • Add innerRef to get ref to inner DOM node styled-components/styled-components#122
  • https://github.com/christianalfoni/formsy-react/blob/master/src/HOC.js#L30
  • <Swipeable innerRef={(el) => this.swipeableElement = el} >
• "create our own" prop to get ref, something like swipeableRef? - react-docs/refs
  • <Swipeable swipeableRef={(el) => this.swipeableElement = el} >

Essentially there is no way currently to just do <Swipeable ref={(el) => this.el = el} >, it appears as though we need to create prop that takes a callback that provides the ref element.

We just need to decide on what to name it, currently leaning towards innerRef. Thoughts?

Great reference to follow the real issue with ref's and HOC's - facebook/react#4213

[DrBoria]

Cool thanks)
Nice work!

[zeus2198]

I was using the useSwipeable() method, and the ref was working if I mentioned the ref prop after the handlers spread in the component but it stopped detecting swipe in touch devices. I got everything to work normally with this workaround:

const handlers = useSwipeable({ ... });
const myRef = React.useRef();

<div {...handlers} ref={(t) => {
  handlers.ref(t); // calling halders ref for touch devices
  myRef.current = t; // setting our ref
}}>

Note: The ref prop has to be mentioned after {...handlers} else this won't work.

[hartzis]

@xxxzeus nice! that's the same approach i tried to communicate here too.

• It is not clear how to use ref from docs #189 (comment)

We'll try to make this a bit more obvious and document it well in v6.