Responsive Variants

By default, Mijn-UI components don't provide responsive variants out of the box because there aren't many cases where you need them. Additionally, you can easily make components responsive by adding Tailwind CSS class names.

This guide will show you how to create responsive variants for your components.

There are two main ways to create responsive variants:

Using tailwind-variants built-in responsive variants.
Using the use-responsive-variants hook.

Making Components Responsive Using `tailwind-variants`

Although you can use tailwind-variants to make components responsive, it has a limitation when it comes to making compound variants responsive. To overcome this limitation, you can use the use-responsive-variants hook.

Install necessary dependencies

npm install tailwind-variants

Configure Tailwind CSS

To make responsive variants work smoothly, you need to wrap the Tailwind config with the withTV function from tailwind-variants. You can refer to the tailwind-variants documentation for more details.

tailwind.config.ts

import { mijnui } from "@mijn-ui/react-theme";
import { withTV } from "tailwind-variants/dist/transformer.js"; 
 
/** @type {import('tailwindcss').Config} */
export default withTV({ 
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@mijn-ui/react-theme/dist/**/*.js",
  ],
  plugins: [mijnui({})],
});

Applying Responsive Variants to Component

You can apply the responsive variants to the component like this:

components/button-with-tv.tsx

import { Button, ButtonProps } from "@mijn-ui/react"
import {
  ButtonVariantProps,
  VariantProps,
  buttonStyles,
  tv,
} from "@mijn-ui/react"
 
const responsiveButton = tv(
  {
    extend: buttonStyles,
    variants: {
      size: {
        xs: "h-8 px-2 text-small",
        sm: "h-9 px-3 text-small",
        md: "h-10 px-3.5 text-small",
        lg: "h-11 px-5 text-medium",
        xl: "h-12 px-6 text-medium",
      },
    },
  },
  {
    responsiveVariants: true, // `true` to apply to all screen sizes
  },
)
const TVResponsiveButton = ({
  size,
  variant,
  radius,
  color,
  iconOnly,
  classNames,
  ...props
}: Omit<ButtonProps, keyof ButtonVariantProps> &
  VariantProps<typeof responsiveButton>) => {
  const styles = responsiveButton({ color, size, variant, radius, iconOnly })
 
  return (
    <Button
      classNames={{
        base: styles.base({ className: classNames?.base }),
        icon: styles.icon({ className: classNames?.icon }),
      }}
      {...props}
      unstyled // Set unstyled to true to avoid default classes, as we are extending with tailwind variants.
    />
  )
}
 
export { TVResponsiveButton }

Using the Component

import ResponsiveButton from "@/components/responsive-button";
 
const App = () => {
  return (
    <ResponsiveButton size={{initial: "icon", sm: "md", lg: "lg"}}>Button</ResponsiveButton>
  )
}

Making Component Responsive Using `use-responsive-variants` Hook

Add the following hook file to your project:

hooks/use-responsive-variants.ts

"use client"
 
// Adapted from https://gist.github.com/Gomah/cb2b0b3f7cb9838a0efd6508a42c3eda/aa5d64a6ca2c0cfb6c86118410c943c62a1023b2
/* eslint-disable */
import { useMediaQuery } from "@mijn-ui/react-hooks"
 
const screens = {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
} as const
 
type Breakpoints = keyof typeof screens
 
type ResponsiveValue<T> = T extends boolean
  ? boolean
  : T extends string
    ? T
    : keyof T
 
type ResponsiveProps<T> = {
  [K in Breakpoints]?: ResponsiveValue<T>
} & { initial: ResponsiveValue<T> }
 
function getScreenValue(key: string) {
  return Number.parseInt(screens[key as Breakpoints])
}
 
/**
 * Custom hook for handling responsive behavior for multiple attributes.
 * @param props - An object where keys are attribute names, and values are responsive props for each attribute.
 * @returns An object with resolved responsive values for each attribute.
 */
export function useResponsiveVariants<T extends Record<string, any>>(props: {
  [K in keyof T]: ResponsiveProps<T[K]>
}) {
  const results: Partial<Record<keyof T, any>> = {}
 
  for (const key in props) {
    const { initial, ...breakpoints } = props[key]
    const matchedBreakpoint = Object.keys(breakpoints)
      .sort((a, b) => getScreenValue(b) - getScreenValue(a))
      .map((breakpoint) =>
        useMediaQuery(`(min-width: ${screens[breakpoint as Breakpoints]})`)
          ? breakpoints[breakpoint as Breakpoints]
          : undefined,
      )
      .find((value) => value !== undefined)
 
    results[key] = matchedBreakpoint ?? initial
  }
 
  return results as T
}

Use the Hook in Your Component

components/button-with-hook.tsx

"use client"
 
import { Button } from "@mijn-ui/react"
// update import path
import { ButtonVariantProps } from "@mijn-ui/react"
import { useResponsiveVariants } from "./use-responsive-variants"
 
const ButtonWithHook = () => {
  const buttonVariants = useResponsiveVariants<ButtonVariantProps>({
    color: {
      initial: "primary",
      sm: "secondary",
      md: "danger",
      lg: "danger",
    },
    size: {
      initial: "xs",
      sm: "sm",
      md: "lg",
      lg: "lg",
    },
  })
 
  const { color, size } = buttonVariants
 
  return (
    <Button color={color} size={size}>
      Button
    </Button>
  )
}
 
export default ButtonWithHook

By following this guide, you can easily create responsive variants for Mijn-UI components using either tailwind-variants or the use-responsive-variants hook. Each approach provides flexibility and ensures your components look great on any screen size.

Responsive Variants

On this page