Extending primitive with children

[MerlinMason]

I'm a bit of a TypeScript noob, so apologies if this is a stupid question...

The documentation shows an example of how to extend a primitive, but in the example given the component doesn't have children.

I'm trying to do the following:

import React from "react";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";

const ToggleGroup = React.forwardRef<
    React.ElementRef<typeof ToggleGroupPrimitive.Root>,
    React.PropsWithChildren<typeof ToggleGroupPrimitive.Root>
>(({ children, ...restProps }, forwardedRef) => (
    <ToggleGroupPrimitive.Root
        className="bg-gray-50 border border-gray-200 rounded divide-x divide-gray-200"
        ref={forwardedRef}
        {...restProps}
    >
        {children}
    </ToggleGroupPrimitive.Root>
));

ToggleGroup.displayName = "ToggleGroup";
export default ToggleGroup;

However I'm getting an error:

Any help would be very much appreciated, happy to submit an addition to the docs if I work out :)

[jjenzz]

Hi @MerlinMason ,

There's a bit in the "extend a primitive" docs about Radix.ComponentPropsWithoutRef.

I think that's the bit you're missing ☺️ https://codesandbox.io/s/epic-cannon-orzri?file=/src/App.tsx

[MerlinMason]

Thanks! :)