How do you create/extend custom component with custom props?

Question

I have this extended component with custom Boolean props:

import { extendVariants } from "@nextui-org/system";
import { Link } from "@nextui-org/link";

const CustomLink = extendVariants(Link, {
    defaultVariants: {
        color: 'foreground',
        booleanProps1: false,
        booleanProps2: false,
        booleanProps2: false,
    },
    // ...
};

export default CustomLink;

The problem is when I used it like below:

<Link className="my-class" booleanProps1 href="#">My link</Link>

I got an error on my console:

Warning: React does not recognize the `booleanProps` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `booleanprops` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I know I can just ignore it, but this error is annoying to me. How do you properly extend/create custom components with NextUI/Next.js/React.js?

I'm pretty much new to all NextUI/Next.js/React.js. I have been looking at the docs for all of them, and it seems like nothing is mentioned about this. Side note: I use TypeScript.

Answer 1

The component <Link> renders an anchor element <a>, and booleanProps is not a valid attribute for <a> (or any other HTML/DOM element), that's what the error tells you.

If you really need a custom property for such HTML elements, you can use a data attribute.