DOM Element Refs

[conradz]

Currently it doesn't look like there is any way to get a reference to the DOM node. Setting a ref prop on the component always sets the ref to null (I think this is because it uses a functional component; React doesn't support refs on these). Styled-components allows a innerRef property for this. I looked at implementing this in emotion, but it looks like it might be a bit more complicated than I thought at first since you can wrap other styled components, not just DOM nodes.

My use-case for this is to allow focusing a DOM node based on keyboard events. For this I need a reference to the actual DOM node to call .focus(), either using findDOMNode or a ref on the actual DOM node. Any help or pointers are greatly appreciated.

[conradz]

I did find that you can wrap it in a Component class that works around this:

const Input = styled('input')`font-size: 16px`
class InputWrapper extends React.Component {
  render () { return <Input {...this.props} />; }
  focus () { ReactDOM.findDOMNode(this).focus(); }
}

[tkh44]

Yes this is a needed feature.

We need to extend the api for styled to accept an innerRef option.

[CompuIves]

I tried my hand at it: #43

[tkh44]

Closed in #43