CODEWITHSUNDEEP
reactjstypescriptheadless-ui
Mahdi Hasani
Mahdi Hasani

Reputation: 31

Wrap HeadlessUI component in react with extra props

I'm trying to wrap the headless UI button component, extend default props, and add variant props.

This is my wrapped button component:

import { Button, ButtonProps } from '@headlessui/react';
import classNames from 'classnames';

type ButtonVariant = 'fill' | 'outline';

interface IButton extends ButtonProps {
    variant: ButtonVariant;
}

export default (props: IButton) => {
    const style = classNames('button', {
        [`variant-${props.variant}`]: props.variant,
    });

    return (
        <Button className={style} {...props}>
            {props.children}
        </Button>
    );
};

I have an error at ...props the point when I want to apply all props on the Headless UI component.
This is my error:
Type ...IButton is not assignable to type ReactNode | ((bag: ButtonRenderPropArg) => ReactElement)

I want to have all props without applying them manually and one by one to the component.
I mean for example to have access to give value to onClick event or other button props that have been defined before.

CC: I only have this error in the WebStorm IDE!

Upvotes: 0

Views: 209

Answers (0)

Related Questions