How can I extends the props of a component?

[JuaniSilva]

Im trying to extends the props of the accordion component and I'm having some truble getting it done.

For example I would like to have a prop where I can pass a boolean to define where the accordion has borders or not. Something like this

const AccordionItem = React.forwardRef<
	React.ElementRef<typeof AccordionPrimitive.Item>,
	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
	<AccordionPrimitive.Item
		ref={ref}
		className={classNames(
			props.hasBorder ? "border-b border-b-slate-200" : "",
			className
		)}
		{...props}
	/>
));

But I've been trying to extend the props but I having trubble finding a way to do that. Any help?

[emicba]

You can create an interface that extends the props of the AccordionPrimitive.Item, something like

interface AccordionItemProps
  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
  hasBorder?: boolean
}

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  AccordionItemProps
>(({ className, hasBorder, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn(hasBorder ? "border-b border-b-slate-200" : "", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

[shadcn]

Exactly what @emicba said. This is the recommended way.

I'll add this to the docs. I'm going to keep this open for now.

[JuaniSilva]

Thank you so much guys! It worked perfectly

[YugandharrPatil]

Kindly share how to pass props as string, not just boolean.

[h-bijjou-binairy]

const Select = SelectPrimitive.Root

For the select, Is there any way to extend it with a custom Prop ?

[DewaMadeWira]

Kindly share how to pass props as string, not just boolean.

I tried it by changing the interface type to string and it works.

[donghoon-song]

const Select = SelectPrimitive.Root

For the select, Is there any way to extend it with a custom Prop ?

Any way to solve this?

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[abisalde]

For SelectTrigger and how to change the CaretDown I extended the type like this

type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
  Icon?: React.ReactNode;
}

<SelectTrigger
     Icon={<Calendar className="h-5 w-5" />}
     className="w-[180px] rounded-none border-0 ring-0 focus:border-none focus:ring-0 focus:ring-offset-2 active:border-none">
     <SelectValue placeholder="Theme" />
</SelectTrigger>