as prop of an ElementComponent

[NicholasBoll]

Compound components allow an as prop to be passed. The as could be a element like 'div' or 'button', but could also be another component. There are a few types of components that are allowed:

• ElementComponent<any, Props>
• React.FC<Props>
• React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>

A component passed in should forward a ref and spread props. Typescript has no way to enforce prop spreading or even proper prop merging. An example on prop merging using our mergeProps utility function will call onClick callback instead of overriding it.

An example of an ElementComponent being passed another component:

<Popup.Target as={DeleteButton}>

What happens is the Popup.Target will render a DeleteButton, forwarding a ref and all props provided by usePopupTarget to the DeleteButton. It is up to DeleteButton to properly apply and merge props with its own props to the underlying element which should also forward the ref to the same underlying element.

Question 1:

Should a React.FC component be allowed in the as?

Not all our ElementComponent's need the ref to be forwarded, but none explicitly state they do. The safe option is to assume ref forwarding is always needed.

Question 2:

Should the Props of the provided as component be implicitly merged in types.

Examples:

interface Props1 {
  foo: string
}

interface Props2 {
  bar: string
}

// ignore the `null`s and only focus on the types
const PopupTarget: ElementComponent<'div', Props1> = null
const FunctionComponent: React.FC<Props2> = null
const ForwardComponent = React.forwardRef<HTMLDivElement, Props2>(() => null) // return type is complicated
const ElementComponent: ElementComponent<'div', Props2> = null

<Popup.Target as={FunctionComponent} /> // should the interface be `Props1 & Props2 & HTMLDivElement attributes?
<Popup.Target as={ForwardComponent} /> // should the interface be `Props1 & Props2 & HTMLDivElement attributes?
<Popup.Target as={ElementComponent} /> // should the interface be `Props1 & Props2 & HTMLDivElement attributes?

[NicholasBoll]

FunctionComponent

<Popup.Target as={FunctionComponent} />

If allowed, the HTML attribute interface is unknowable unless the Props1 manually includes it. There's an option to default to the element interface described by PopupTarget ('div').

ForwardComponent

<Popup.Target as={ForwardComponent} />

We can guess that the HTML attribute interface will probably be the same as the ref type. In this case, HTMLDivElement since the ref will have to be forwarded to something, otherwise why forward it?

ElementComponent

<Popup.Target as={ElementComponent} />

Although not a stronger guarantee of proper use, ElementComponent is designed to forward refs and props, so it makes more sense to merge the interfaces.