GetVariants
Briefly
Section titled “Briefly”Get the variants type from an instance of a tw.rotary
or tw.variants
styler.
1. Type definition
Section titled “1. Type definition”import type { Styler } from "tailwindest"
export type GetVariants<StylerInstance extends Styler<any, any, any>> =
StylerInstance extends Styler<infer Arg, any, any>
? Arg extends never
? never
: Exclude<Parameters<StylerInstance["class"]>[0], "base">
: never
2. Spec
Section titled “2. Spec”type InferredVariants = GetVariants<typeof stylerInstance>
Generic Parameter: stylerInstance
Section titled “Generic Parameter: stylerInstance”- type: An instance of a
tailwindest
styler, i.e., the return value oftw.rotary(...)
ortw.variants(...)
. - usage: The styler instance from which to extract variant types.
3. Example
Section titled “3. Example”Extract rotary
variants
Section titled “Extract rotary variants”-
Make a
rotary
styler:const button = tw.rotary({ variants: { default: {}, warning: {}, success: {}, }, })
-
Extract the variants type:
import type { GetVariants } from "tailwindest" type ButtonVariants = GetVariants<typeof button> // Result: // type ButtonVariants = "default" | "warning" | "success"
Extract variants
variants
Section titled “Extract variants variants”-
Make a
variants
styler:const button = tw.variants({ variants: { type: { default: {}, warning: {}, success: {}, }, size: { sm: {}, md: {}, lg: {}, }, }, })
-
Extract the variants type:
import type { GetVariants } from "tailwindest" type ButtonVariants = GetVariants<typeof button> // Result: // type ButtonVariants = { // type?: "default" | "warning" | "success"; // size?: "sm" | "md" | "lg"; // }
-
Use the extracted type for component props:
interface ButtonProps extends GetVariants<typeof button> { children: React.ReactNode } const Button = (props: ButtonProps) => { const { children, ...variantOptions } = props return ( <button className={button.class(variantOptions)}> {props.children} </button> ) }