React開発: clsxで管理しやすいclassNameの指定方法

はじめに

Reactプロジェクトでは、条件に応じてクラス名を追加したり、複数のクラス名を組み合わせたりする必要な時が度々ありますが、プロジェクトの規模が大きくなった時にコードが見づらくなったり、煩雑になったりします。
そこで、clsx ライブラリを使用すると、クラス名を簡単に操作でき、コードの可読性を挙げられることができます。
clsx は classnames というライブラリと比較して、バンドルサイズが小さく、ブラウザのベンチマークでも優れたパフォーマンスを示している(ソースは以下clsxのREADMEより引用)ため、最近では clsx が広く利用されています。
また、clsx の名前もclassnamesと比較すると短くてコードを書きやすいという利点もあります。

A tiny (239B) utility for constructing className strings conditionally.
Also serves as a faster & smaller drop-in replacement for the classnames module.

日本語訳:
className文字列を条件付きで構築するための小さな (239B) ユーティリティです。
また、classnames モジュールをより高速に、より小さく置き換える役割も果たします。

clsxのREADMEより引用: https://github.com/lukeed/clsx/blob/master/readme.md

clsxを導入するメリットまとめ

動的にclassNameを指定する際にコードの可読性が挙げることが可能
classnamesのライブラリよりサイズが小さく高速
clsx()の方が classnames()より名前が短く記述量が少なくなる

clsxのインストール

npm install --save clsx

clsxの使い方

clsx関数は任意の引数を取ることができ、各引数にオブジェクト、配列、ブール値、または文字列を指定することでclassNameを結合することができます

import { clsx } from 'clsx';

clsx("foo bar", "baz");
//=> 'foo bar baz'


clsx("foo bar", ["baz", "fizz"]);
//=> 'foo bar baz fizz'

clsx("foo", {
    "button": true,
    "active": false
})
//=> 'foo button'


clsx("foo", {
    "button": true,
    "active": true
})
//=> 'foo button active'


clsx('foo', true && 'active');
//=> 'foo active'import { clsx } from 'clsx';

clsx("foo bar", "baz");
//=> 'foo bar baz'


clsx("foo bar", ["baz", "fizz"]);
//=> 'foo bar baz fizz'

clsx("foo", {
    "button": true,
    "active": false
})
//=> 'foo button'


clsx("foo", {
    "button": true,
    "active": true
})
//=> 'foo button active'


clsx('foo', true && 'active');
//=> 'foo active'

コンポーネントでの使用例

import * as React from "react"

import { clsx } from "clsx"

export interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
    return (
      <textarea
        className={clsx(
          "sample-classname",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Textarea.displayName = "Textarea"

export { Textarea }

clsxでTailwind CSSを使用する場合

clsxをtwMergeでラップすることでtailWindcssに対応したユーティリティを作成することができます。
参考: https://ui.shadcn.com/docs/installation/manual#add-a-cn-helper

補足: twMergeはnpm i tailwind-mergeでインストールが必要です

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

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

定義したcnメソッドの使い方

twMergeでラップすることで重複したTailwindCSSのクラス名を上書きすることができます

import { cn } from "@/lib/utils" // 定義したcnをインポート

cn("p-4 mt-4", "border mt-5");
// mt-4がmt-5に上書きされる
//=> 'p-4 border mt-5'


cn("p-4 mt-4", ["border", "mt-5"]);
//=> 'p-4 border mt-5'

cn("p-4", {
    "w-full": true,
    "h-20": false
})
//=> 'p-4 w-full'


cn("p-4", {
    "w-full": true,
    "h-20": true
})
//=> 'p-4 w-full h-20'