Skip to content
API References
GetVariants

GetVariants

Briefly

Get variants type of instance of createTools - rotary, variants

1. Type definition

type GetVariants<TypeofVariants> = TypeofVariants extends {
    class: (variants: infer Variants) => unknown
}
    ? Variants extends string
        ? Variants
        : Partial<Variants>
    : never

2. Spec

Usage

type InferredVariants = GetVariants<InferTarget>

Generic Parameter: InferTarget

  • type: generic InferTarget is instance of createTools - rotary, variants
  • usage: extract variant type

3. Example

Extract rotary variants

  1. Make rotary style
const button = tw.rotary({
    default: {},
    warning: {},
    success: {},
})
  1. Extract variants type
type ButtonVariants = GetVariants<typeof button>
 
⬇️ ⬇️ ⬇️ ⬇️ ⬇️
 
type ButtonVariants = "default" | "warning" | "success"

Extract variants variants

  1. Make variants style
const button = tw.variants({
    variants: {
        type: {
            default: {},
            warning: {},
            success: {},
        },
        size: {
            sm: {},
            md: {},
            lg: {},
        },
        light: {
            true: {},
            false: {},
        },
    },
})
  1. Extract variants type
type ButtonVariants = GetVariants<typeof button>
 
⬇️ ⬇️ ⬇️ ⬇️ ⬇️
 
type ButtonVariants = {
    type?: "default" | "warning" | "success" | undefined
    size?: "sm" | "md" | "lg" | undefined
    light?: boolean
}
  1. Plug variants type
const Button = (props: React.PropsWithChildren<ButtonVariants>) => {
    const { children, ...btnOption } = props
 
    return <button className={button.class(btnOption)}>{props.children}</button>
}
mergePropsNext