💡 Proposal - consistent use of React references

Forma 36 contribution proposal

What?

👋

Forma 36 doesn’t currently handle React references in a consistent way (see #267). As we’ve talked about, v4 provides a good opportunity to take care of this. To get this consistency I suggest we always forward the reference to the root element, no matter what.

How?

For most of our components it’s pretty straightforward, we use React.forwardRef and set the ref on the outermost element in the component.

It gets a bit more complicated for some of our components. We have a lot of them wrapped in for example a <div>, and for consistency I suggest we still send the reference to that element instead of whatever component is inside it. Contrived example:

import React, { forwardRef } from 'react'

interface TextFieldProps {
  ...
}

const TextField = forwardRef<HTMLHeadingElement, TextFieldProps>(
  function TextField(props, forwardedRef) {
    return (
      <div ref={forwardedRef}>
        <input {...props} />
      </div>
    )
  }
)

export default TextField

In the above example users probably DO often want the reference to the <input> and not the <div>, but I think it’s better for us to stay consistent. Instead maybe we can cut down on our use of wrapping elements.

Open questions

I need your help in coming up with solutions for what to do in situations where we are throwing multiple references around. Should we export them all, or just the root?

[gui-santos]

We still have the open question to answer. Like the TextField component, the root ref goes to a wrapper div, so should we also export a ref to the input itself?

Yes! We need export refs for the inputs, it’s the main problem in the current solution IMO So I guess in components where there is a wrapper and other components inside of it we will need to export the ref of everyone, no?

[denkristoffer]

We still have the open question to answer. Like the TextField component, the root ref goes to a wrapper div, so should we also export a ref to the input itself?