react classnames

classnames は、Reactでクラス名を条件付きで簡単に結合できるユーティリティライブラリです。まず、npmでインストールし、次にインポートして使うことができます。

npm install classnames

使用例

import classNames from 'classnames';

function MyComponent({ isActive, isPrimary }) {
  const buttonClass = classNames({
    'btn': true,            // 常に適用されるクラス
    'btn-active': isActive,  // isActiveがtrueのとき適用
    'btn-primary': isPrimary // isPrimaryがtrueのとき適用
  });

  return <button className={buttonClass}>クリック</button>;
}

export default MyComponent;

簡単に要約すると、classnames を使うことで、ボタンなどの要素に対して 動的にクラスを付与 できるようになります。条件に応じてクラスを追加したり、外部から受け取ったクラス名と統合したりできるので、スタイルの管理が簡単になります。