clsxを使ってみる-Reactで使いたい

Posted at 2023-10-07

背景

clsxを使ってみたく軽く調べたところ概要から基本的な使い方までを説明している記事があまりなかったので、簡単に自分の理解した範囲でまとめます。

私は初学者なので、基本的には同じ初心者向けの内容となると思います。
また、間違いも多少あるかもしれないので、その場合は優しく教えてください。

それでは行ってみましょう。

clsxは、JavaScriptやTypeScriptで使える軽量なライブラリで、主にReactコンポーネントなどでクラス名の文字列を効率的に、そして簡単に生成するためのものです。
これは特に、CSSのクラス名を動的に構築する際に非常に役立ちます。

軽量:
- clsxはパフォーマンスを意識して設計されており、ライブラリ自体のサイズも非常に小さいです。
柔軟性:
- 文字列、オブジェクト、配列など、さまざまな形式でクラス名を指定できます。
  falsy値のフィルタリング: clsxはnullやundefined、falseなどのfalsyな値を自動的に無視します。

基本的な使用方法をまとめます

まず、プロジェクトにclsxをインストールする必要があります。npmやyarnを使用してインストールできます。

npm install clsx
# または
yarn add clsx

インストールが完了したら、以下のようにインポートして使用できます。

import clsx from 'clsx';

最も基本的な方法です。複数の文字列を渡すと、それらがスペースで結合されます。

clsx('foo', 'bar');

// => 'foo bar'

JavaScriptの条件式を使用して、条件に基づいてクラス名を組み込むことができます。

const isActive = true;
clsx('menu', isActive && 'active');

// => 'menu active'

オブジェクトのキーがクラス名として、そのキーの値（真偽値）がそのクラスが適用されるかどうかを決定します。

clsx({
  'btn': true,
  'btn-primary': true,
  'btn-disabled': false
}); 

// => 'btn btn-primary'

配列内の各要素は、文字列やオブジェクト、または他の配列として指定できます。これにより、複雑な条件でのクラス名の組み合わせも可能です。

const isDisabled = true;
clsx([
  'btn',
  {'btn-primary': !isDisabled},
  {'btn-disabled': isDisabled}
]); 

// => 'btn btn-disabled'

clsxは、null、undefined、falseなどのfalsyな値を自動的にフィルタリングします。これにより、無駄なスペースや不要なクラス名の追加を防ぐことができます。

clsx('foo', null, undefined, false, 0, 'bar'); 

// => 'foo bar'

これらの方法を組み合わせることで、非常に柔軟にクラス名を構築することができます。
特にReactのコンポーネント内でのクラス名の動的な生成に非常に適しています。