Make it easier to pass React props to cva component

[sandgraham]

Is your feature request related to a problem? Please describe.

Using React, it would be nice if I could pass all props to my cva component. Currently I always have to destructure className and pass it to class. Perhaps className could be added as an alias for class as a non-breaking change?

const foo = cva({/* ... */});

function Foo({ className, ...restProps }) {
  return <div className={foo({ class: className, ...restProps })} />
}

Describe the solution you'd like

const foo = cva({/* ... */});

function Foo(props) {
  return <div className={foo(props)} />
}

Coming from stitches I also sometimes miss the ability to extract non-variant props from the component call:

const foo = cva({/* ... */});

function Foo(props) {
  const { className, props: remainingProps } = foo(props);
  return <div className={className} {...remainingProps} />
}

Describe alternatives you've considered

I suppose I could wrap cva and the returned component function such that className is mapped to class. I haven't tried it so perhaps it isn't so bad. Still, I imagine others using React might benefit from this type of functionality being built in.

Thanks 🙌

[joe-bell]

Thanks @sandgraham! It’s something I’ve thought about adding — as a prop and as a separate package — but it feels like a lot of overhead for one framework (FWIW I use React too)

Not ruling this out just yet, but I think it’s fairly unlikely I’ll do this anytime soon

[sandgraham]

@joe-bell I'm curious, when you're using cva with react do you manually unpack the class property to pass it to className?

[joe-bell]

I manually destructure className and pass it to class, yes

[hugotiger]

Hey! I think it makes sense for this library to alias className to class. It still keeps the API very framework agnostic, but much like Tailwind's VSCode plugin it supports className out of the box. Seeing as React is probably the main framework this will be used in I think it makes sense.

Either that or naming the prop cx since its behaviour is the same as the cx function (it accepts string | string[]). The current name class doesn't give you any hint that you can pass arrays. This would be a bigger change though, but in my limited time of thinking of the problem would be a more clear API.

Love the library btw! Awesome work with the api and the typings :)

[joe-bell]

Fair point! Thanks @hugotiger, I’ll have a think about it

[joe-bell]

className is now available in 0.3.0