React開発: clsxで管理しやすいclassNameの指定方法!
はじめに
Reactプロジェクトでは、条件に応じてクラス名を追加したり、複数のクラス名を組み合わせたりする必要な時が度々ありますが、プロジェクトの規模が大きくなった時にコードが見づらくなったり、煩雑になったりします。
そこで、clsx ライブラリを使用すると、クラス名を簡単に操作でき、コードの可読性を挙げられることができます。
clsx は classnames というライブラリと比較して、バンドルサイズが小さく、ブラウザのベンチマークでも優れたパフォーマンスを示している(ソースは以下clsxのREADMEより引用)ため、最近では clsx が広く利用されています。
また、clsx の名前もclassnamesと比較すると短くてコードを書きやすいという利点もあります。
clsxを導入するメリットまとめ
動的にclassNameを指定する際にコードの可読性が挙げることが可能
classnamesのライブラリよりサイズが小さく高速
clsx()の方が classnames()より名前が短く記述量が少なくなる
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
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'
最後に
今回は clsx ライブラリについてご紹介しました。
コードを見やすく、管理しやすくするために clsx を活用してみてください!
ご覧いただきありがとうございました🦭
■『株式会社グラディート』では受託・SES・デザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね!
株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/
株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/
この記事が気に入ったらサポートをしてみませんか?