Create "compound" component with forwardRef

[gamegee]

I have created custom components library on top of chakra-ui.
And for better code composability and readability I want to use the compound component pattern

E.g.

<Menu>
  <Menu.Item>item 1</Menu.Item>
  <Menu.Item>item 2</Menu.Item>
  <Menu.Item>item 3</Menu.Item>
</Menu>

I am able to make it work, my only issue come from typescript.

import { Box, forwardRef } from '@chakra-ui/react'
import Item from './Item'

type Props = {
  menuType: 'primary' | 'secondary'
}

export const Menu = forwardRef<Props, 'div'>(({ children, ...restProps }, ref) => {
  // ... do my stuff
  return (
    <Box>{children}</Box>
  )
})

Menu.Item = Item // Here is the TS error

The issue come from forwardRef return types, I got the following ts error:
Property 'Item' does not exist on type 'ComponentWithAs<"div", Props>'

Do you have any resources/best practices about how I should type this kind of component ?

[gamegee]

I found a workaround, by forcing the type. I can go with this for now, it's clean

import { Box, ComponentWithAs, forwardRef } from '@chakra-ui/react'
import Item from './Item'

type Props = {
  menuType: 'primary' | 'secondary'
}

// defined type using chakra ComponentWithAs
type MenuCompoundType = ComponentWithAs<'div', Props> & {
  Item?: typeof Item
}


export const Menu: MenuCompoundType = forwardRef(({ children, ...restProps }, ref) => {
  // ... do my stuff
  return (
    <Box>{children}</Box>
  )
})

Menu.Item = Item // Works now !

[Ryongyon]

Hello, I tried to follow the sample code you provided, but a Typescript error occurred:

TS2604: JSX element type 'Menu.Item' does not have any construct or call signatures.

I think the error is caused by Item?: typeof Item, because it returns a type that is undefined, causing React to incorrectly treat it as a JSX.Element.

How do I fix this problem with?

[gamegee]

Hi @Ryongyon, I am no sure to have the correct answer.
My first idea is the Item is not correctly exported from your file './Item'

[alexalannunes]

And what a about ref type?