Reactでclsxを使ってclassNameをシンプルに書く方法

Reactで複数のCSSクラスをダイナミックに切り替えるために、clsx というユーティリティを使うと、すっきりしたコードが書けます。この記事では、clsx の基本的な使い方や実用的なケースを解説します。

clsxとは何か

clsx は、ReactでCSSのクラス名を効率よくシンプルに書くためのライブラリです。

インストール方法

clsx をインストールするには、npmまたはYarnを使います。

npm install clsx
# または
yarn add clsx

clsxの基本的な使い方

clsxの引数に複数のCSSクラスを連続させます。

import clsx from 'clsx';

function MyComponent({ isActive, hasError }) {
  return (
    <div
      className={clsx(
        'base-class', // 基礎クラス
        isActive && 'active-class', // isActiveがtrueなら追加
        hasError && 'error-class'  // hasErrorがtrueなら追加
      )}
    >
      Hello, World!
    </div>
  );
}

• この例では、isActive や hasError の値により、active-class や error-class を効果的に追加します。

実用的な使い方

clsx は、細かいロジックや配列をコンビネーションして、クラス名を生成することも可能です。

オブジェクトの設定

import clsx from 'clsx';

function MyComponent({ isActive }) {
  const classes = clsx({
    'base-class': true,
    'active-class': isActive,
    'inactive-class': !isActive
  });

  return <div className={classes}>Dynamic Classes</div>;
}

配列の使用

import clsx from 'clsx';

function MyComponent() {
  const classes = clsx([
    'base-class',
    'extra-class',
    Math.random() > 0.5 && 'random-class' // 条件つき
  ]);

  return <div className={classes}>Array Example</div>;
}

まとめ

clsx は、Reactプロジェクトでクラス名を効果的に書くための強力なライブラリです。変数、配列、ロジックを簡単に組み合わせることで、より減重なコードを書くことができます。