【めちゃ便利】clsxを使ってReactでCSSを動的に構築する!!

早速説明になりますが、clsxは、可変長引数として受け取った文字列を結合し、クラス名を作成します。
https://www.npmjs.com/package/clsx
難しく聞こえますがめちゃくちゃ簡単で便利で使いまくってるので、是非、試してみてほしいです。

手順

大きく分けてたったの3ステップです。では、そっこうで解説してきます。

①インストール

npm install --save clsx

②インポート(Tailwind使用)

lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

これはもう書き方みたいな感じなのであまり細かいことは気にしなくて、ひとまず書いちゃいましょう。

③使いたい場所で使用する

たとえばこのような感じで

import { cn } from "@/lib/utils";

 <div className={cn('lg:h-[140px] h-[100px] border-t-2', // 共通のスタイル
        status === 'correct' && 'border-transparent bg-green-100',
        status === 'wrong' && 'border-transparent bg-rose-100',
    )}>
 </div>

上記では共通のスタイルが"lg:h-[140px] h-[100px] border-t-2"の部分で、それにプラスしてcorrectの場合は"border-transparent bg-green-100"が、wrongの場合は"border-transparent bg-rose-100"が動的に当たるようになっています。

もっとシンプルに使うとすれば(このくらいだと三項演算子で事足りますが説明のために紹介)

import { cn } from "@/lib/utils";

<div className={cn("p-4 rounded", // 共通のスタイル
    type === 'error' && 'bg-red-500 text-white',
    type === 'warning' && 'bg-yellow-500 text-black', 
    )}>
 </div>

まとめ

という感じで大きく分けてたった3stepで使えます。
最後に紹介したシンプルな例のように共通のスタイル(たとえばボタンのお大きさと形など)を決めておき、あとは条件によって動的にスタイルを変化させたい場合(ボタンのbgやtextの色など)にめちゃくちゃ便利です。

propsを渡しまくったり、ユーザーのstatusやコンポーネントの状態がどんどん変わっていくような、複雑なアプリケーション開発ではめちゃくちゃ重宝しますので、是非、使ってみてください。