React Bootstrapのドロップダウンでトグル表示をカスタマイズする

概要

Webページでのドロップダウンについて、様々なライブラリを使ったりCSSの設定でも対応できると思います。ReactでBootstrapを使っている場合はReact Bootstrapのドロップダウンが便利かなと個人的には思います。今回はこのReact Bootstrapのドロップダウンについて書いてみます。

トグル表示について

ドキュメントにドロップダウンの実装例があるのですが、デフォルトだとトグル部分は、variantの色がついたボタン＋ドロップダウンの表示方向のキャレットが表示されます。トグルに独自の画像などを表示したい時は、Custom Dropdown Componentsの実装のように、CustomToggleを定義します。

実装サンプル

CustomToggleを定義した実装例です。トグルにはFontAwesomeIconのcogを表示しています。

sample.js

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <a
    href=""
    ref={ref}
    style={{ color: "black" }}
    onClick={(e) => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {children}
  </a>
));

return (
  <div>
    <Dropdown>
      <Dropdown.Toggle
        as={CustomToggle}
        id="dropdown-custom-components"
      >
        <FontAwesomeIcon
          icon={faCog}
          className="fa-2x"
          role="button"
        />
      </Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item href="/login">
          ログイン
        </Dropdown.Item>
        <Dropdown.Item href="/register">
          会員登録
        </Dropdown.Item>
        <Dropdown.Item href="/question">
          お問い合わせ
        </Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  </div>
);

以下のような表示になります。