Props & Conditionals
Answered
Himalayan Snowcock posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
Himalayan SnowcockOP
Hello, I'd like to explain my situation. I have a badge component that has a variant props, which allows me to manage the style of the badge.
When I call my badge component in my main component, I would like to use the state of the badge variant to modify other styles of my main component. For example, to change the color of a text.
The problem is that I can't make the variant conditional in order to check it and change the style of my main component. Can you advise me to proceed in another way?
When I call my badge component in my main component, I would like to use the state of the badge variant to modify other styles of my main component. For example, to change the color of a text.
The problem is that I can't make the variant conditional in order to check it and change the style of my main component. Can you advise me to proceed in another way?
![Image](https://cdn.discordapp.com/attachments/1219965611564863519/1219965612416176218/20240320115805.png?ex=660d3883&is=65fac383&hm=71553fbe624dcd60c382f9968a3d3c1331f8ed03adfd2c3370ade42d85cd82bd&)
Answered by American Crow
@Himalayan Snowcock if you want some stronger typing and bit more bulletproof because of tailwind class merging you might want ot have a look:
import { cva, type VariantProps } from 'class-variance-authority'
import * as React from 'react'
import { cn } from '@/lib/utils'
const shellVariants = cva('grid items-center gap-8 pb-8 pt-6 md:py-8', {
variants: {
variant: {
default: 'container',
sidebar: '',
centered: 'container flex h-[100dvh] max-w-2xl flex-col justify-center',
markdown: 'max-w-3xl py-8 md:py-10',
},
},
defaultVariants: {
variant: 'default',
},
})
interface ShellProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof shellVariants> {
as?: React.ElementType
}
function Shell({
className,
as: Comp = 'section',
variant,
...props
}: ShellProps) {
return (
<Comp className={cn(shellVariants({ variant }), className)} {...props} />
)
}
export { Shell, shellVariants }
5 Replies
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
American Crow
you most likely want to create a custom component similar to
You make Shell accept a variant
<GiveawayBadge />
. Let's call that new component <Shell />
You make Shell accept a variant
<Shell variant='enterprise' > {children} </Shell>
and based on the variant you do your styling. Not sure what can be extracted from your layout if you should go with just children or component composition. But you get the idea![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
Himalayan SnowcockOP
Nice thanks for your help !
![Image](https://cdn.discordapp.com/attachments/1219965611564863519/1219980231184613446/20240320130543.png?ex=660d4621&is=65fad121&hm=6707cc4089b15a51eb66d3f5447beef2b0309cff08404c0c2a88ee0567cb458b&)
![Image](https://cdn.discordapp.com/attachments/1219965611564863519/1219980231440334918/20240320130459.png?ex=660d4621&is=65fad121&hm=50f35a8be4d897f904e798bcfeca22714096ac4c45d628d82383fb26353f4731&)
![Image](https://cdn.discordapp.com/attachments/1219965611564863519/1219980231691997224/20240320130446.png?ex=660d4621&is=65fad121&hm=e3eb2416ce047b079593a18eae5816f776c8c08b02804d9df6735d2202c43f60&)
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
American Crow
yea thats what i meant. well done
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
American Crow
@Himalayan Snowcock if you want some stronger typing and bit more bulletproof because of tailwind class merging you might want ot have a look:
import { cva, type VariantProps } from 'class-variance-authority'
import * as React from 'react'
import { cn } from '@/lib/utils'
const shellVariants = cva('grid items-center gap-8 pb-8 pt-6 md:py-8', {
variants: {
variant: {
default: 'container',
sidebar: '',
centered: 'container flex h-[100dvh] max-w-2xl flex-col justify-center',
markdown: 'max-w-3xl py-8 md:py-10',
},
},
defaultVariants: {
variant: 'default',
},
})
interface ShellProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof shellVariants> {
as?: React.ElementType
}
function Shell({
className,
as: Comp = 'section',
variant,
...props
}: ShellProps) {
return (
<Comp className={cn(shellVariants({ variant }), className)} {...props} />
)
}
export { Shell, shellVariants }
Answer
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
Actually I’ll select the latter message as it is a lot better and more detailed