Radix UI Typescript Typings

Question

Using radix-ui to make reusable components in typescript and react (bit of a typescript novice). The API documentation includes different props that can be used in the component but they are broken into sections (ex: Root, Trigger, Content, https://www.radix-ui.com/docs/primitives/components/dropdown-menu). I would like to extend the props from the component so i could use the 'open' prop from Root and 'onSelect' from Item but this code

import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu"

export interface DropdownMenuItemProps extends RadixDropdownMenu.DropdownMenuProps {
   
}

only lets me pull props from the root props; I cant access the onSelect prop.

this example code gives me access to the 'onSelect' prop.

export interface DropdownMenuItemProps extends RadixDropdownMenu.MenuItemProps {
   
}

There isnt one single 'Parent Props' that can be extended. Feel like if you are using a library a single extension import should give you access to all of them? Or is there a way to combine the two extensions that im missing? Looking for a way to get access to all the props available on the component.

Thanks in advance.

Answer 1

it seems you are missing the typescript part here,

you could do:

import * as _ from "@radix-ui/react-dropdown-menu";

// if you prefer an interface
export interface DropdownMenuItemProps {
  open: _.DropdownMenuProps["open"];
  onSelect: _.DropdownMenuItemProps["onSelect"];
}

// if you prefer a type with Pick (dryer and better option to me)
export type DropdownMenuItemProps = Pick<_.DropdownMenuProps, "open"> &
  Pick<_.DropdownMenuItemProps, "onSelect">;