Infer ComponentProps of Dialog

[giovanniincammicia]

Hi, I'm trying to create a custom Dialog using headlessui Dialog. My custom Dialog should accept the same props as headlessui one. Using typescript, I'm trying to infer the Props type as I usually do, but It's not working as expected.

import { Dialog as UIDialog } from '@headlessui/react';

export default function Dialog ({ open, onClose }: React.ComponentProps<typeof UIDialog>) { ... }

This is the error I'm getting:

Type '(<TTag extends ElementType<any> = "div">(props: (Pick<PropsOf<TTag>, Exclude<keyof PropsOf<TTag>, "children" | "id" | "as" | "refName" | "className">> & ... 4 more ... & { ...; }) | ... 10 more ... | (Pick<...> & ... 4 more ... & { ...; }), ref: Ref<...>) => Element) & { ...; } & { ...; }' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'.
  Type '(<TTag extends ElementType<any> = "div">(props: (Pick<PropsOf<TTag>, Exclude<keyof PropsOf<TTag>, "children" | "id" | "as" | "refName" | "className">> & ... 4 more ... & { ...; }) | ... 10 more ... | (Pick<...> & ... 4 more ... & { ...; }), ref: Ref<...>) => Element) & { ...; } & { ...; }' is not assignable to type '(props: any) => ReactElement<any, any> | null'.

Any idea? Is this a bug or am I doing something wrong? Thanks.

[giovanniincammicia]

Anyone?

[jrozbicki]

I'm also looking to create custom component from Dialog and extend its props, haven't found a way to do this properly unfortunately. Would be nice to be able to have DialogProps and be able to extend custom interface with that

[baronnoraz]

I second this. I was fully expecting to have access to something like DialogProps. Without it, I've been struggling to make my custom component wrap the Dialog component and make typescript happy.

[MerlinMason]

I came here looking to do exactly the same thing... have you found any work arounds for this?

[RobinMalfait]

You can get the props of any component using React.ComponentProps<typeof ComponentGoesHere>, hope that helps!

[bogdansoare]

@RobinMalfait doing React.ComponentProps<typeof ComponentGoesHere> doesn't work for Dialog

[giovanniincammicia]

@RobinMalfait Yep, that's the whole point of the discussion, I tried to use ComponentProps as usual, but I got that error.
Here is a basic Sandbox

[ernes-to]

It would be handy if the library also exported the types that each component uses.

That being said, for anyone else who comes across this issue, you can declare a utility type such as:

// In a utility types file somewhere in your app
import type { ComponentType } from 'react'

export type ExtractProps<T> = T extends ComponentType<infer P> ? P : T

// Usage in your `.tsx` file
import { Dialog } from '@headlessui/react'

type ModalProps = ExtractProps<typeof Dialog>

export function Modal(props: ModalProps) { ... }

Here's a visual example with TypeScript providing intellisense for all available props:

Hope it helps 👍

[will-stone]

Hi @uicrafts Thanks for this tip. Do you know how to do this with interfaces so it can be extended?

[ryanprescott]

Hi @uicrafts Thanks for this tip. Do you know how to do this with interfaces so it can be extended?

You can extend it with a simple intersection type, but it won't be an interface. For example:

export type ModalProps = ExtractProps<typeof Dialog> & {
    foo: 'bar' | 'baz',
}