What is the cleanest way to add props to extended components? (typescript)

[williamlmao]

Hi there! I am trying to add additional props to components that I am extending.

Here is an example where I am providing some default tailwind styles to Avatar.Root. I want to Root to be able to accept ignoreDefaultStyles prop, so I can conditionally apply those classes.

I've figured out a way to do it, but it doesn't feel very clean. I have a feeling there's a better way to go about this. If you think you have something better, I'd love to hear it. Thanks!

type RootProps = React.ComponentProps<typeof RootInner> & {
  ignoreDefaultStyles?: boolean;
};

const RootInner = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <AvatarPrimitive.Root ref={ref} {...props} className={className} />;
});

RootInner.displayName = AvatarPrimitive.Root.displayName;



const Root = ({ className, ignoreDefaultStyles, ...rest }: RootProps) => {
  return (
    <RootInner
      className={cn(
        {
          "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full":
            !ignoreDefaultStyles,
        },
        className
      )}
      {...rest}
    />
  );
};

Root.displayName = AvatarPrimitive.Root.displayName;
Avatar.Root = Root;

[benoitgrelard]

Hey @williamlmao,

You don't really need that Inner component, it doesn't achieve anything.
You could something like this instead:

type RootElement = React.ElementRef<typeof AvatarPrimitive.Root>;
type RootProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
  ignoreDefaultStyles?: boolean;
};

const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
  const { className, ignoreDefaultStyles, ...rest } = props;
  return (
    <AvatarPrimitive.Root
      {...rest}
      ref={forwardedRef}
      className={cn(
        {
          'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full':
            !ignoreDefaultStyles,
        },
        className
      )}
    />
  );
});

Root.displayName = AvatarPrimitive.Root.displayName;

[williamlmao]

Hey @benoitgrelard, thank you! I tried something similar previously (and totally meant to put it in my original post), but ran into an error. The difference was that I was trying to extend the type inside of the generic.

const Root = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root & {ignoreDefaultStyles: boolean}>
>(({ className, ignoreDefaultStyles,  ...props }, ref) => (

this approach still led to this error:

Property 'ignoreDefaultStyles' does not exist on type 'Pick<AvatarProps & RefAttributes<HTMLSpanElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | ... 252 more ... | "asChild">'.ts(2339)

but looks like extracting them out fixes that. Thank you so much for your help!

[joaom00]

Hey @williamlmao, the correct way would be

const Root = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & { ignoreDefaultStyles: boolean }
>(({ className, ignoreDefaultStyles,  ...props }, ref) => (

[benoitgrelard]

Yep, you can do it inline, but as @joaom00 pointed out, the extra props you're adding should be outside of the generic as you are adding them.

[williamlmao]

Ah! I am clearly still a typescript noob. Thank you both so much @benoitgrelard @joaom00