Creating components with class as an argument?

[kurtbuilds]

Hi, I'm trying to create functional components with the option to pass in style as a property. With default elements, you pass classes with the class keyword.

function App() {
    return <div class="main">Hello</div>
}

But I can't figure out how to pass a class to a custom component (functional component) and also have default styling.

interface ButtonProps /* extends ??? */ {
    type: "rounded" | "square"
}

function MyButton({class, type}: ButtonProps) {
    let classes
    if (type === "rounded") {
        classes = "btn btn-rounded"
    } else {
        classes = "btn btn-square"
    }
    return <button class={classes}>Hello</button>
}

Something like that. The MyButton component has default styling, which can be overwritten/customized by the caller. This is a pattern pretty common in Tailwind and React with classNames=classNames("bg-blue-500 text-lg", <passed in classes to customize the component further>)

But I can't figure out how to do it easily in Preact.

[rschristian]

I'm not quite sure I follow, are you asking about types (your commented out extends) or using class as a prop? If the former, see the code sample below, if the latter, everything works the same as it would in React. Obviously, you can't destructure class like that, it being a reserved word and all in JS. You can use any other name, avoid destructuring, destructure but assign to another name, etc., however.

import type { JSX } from 'preact';

interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement> {
  type: 'rounded' | 'square';
}

function MyButton(props: ButtonProps) {
  const btnStyle =
    props.type === 'rounded' ? 'btn btn-rounded' : 'btn btn-square';

  return <button class={btnStyle}>Hello</button>;
}

[kurtbuilds]

Thank you!

I think between your answer and a bit more playing around, I got what I was after. Turns out you can't unpack class because it's a keyword, but it can still be a property on another object, so it's only kind of reserved.

import type { JSX } from 'preact';

export function classes(...args: (string | JSX.SignalLike<string | undefined> | undefined)[]) {
    return args.filter(Boolean).join(' ');
}

interface CopyButtonProps extends JSX.HTMLAttributes<HTMLButtonElement> {
    text: string;
}

function CopyButton({text, children, ...props}: CopyButtonProps) {
   return <div class={classes("<default-classes>", props.class)}>...</div>
}

function App() {
    return <CopyButton class="<classes to extend styling>"/>
}

[rschristian]

Yup, it's an unfortunate result of the clash between class as an HTML attribute and class for OOP, simply can't use it as a variable name.

[developit]

For completeness' sake: you can also define a different local name for the class prop to avoid the ...props spread. It's a little cheaper/faster too.

function CopyButton({text, children, class: c}: CopyButtonProps) {
   return <div class={classes("<default-classes>", c)}>...</div>
}