react-popover で React 上でポップオーバーを手早く実装する

React でのポップオーバーの表示に最近取り組んでいたのですが、なかなか参考情報が見つけられませんでした。

色々調べた中で一番扱いやすそうだった littlebits/react-popover について紹介しようと思います。

react-popover とは

littlebits/react-popover

React でシンプルにポップオーバーを実装できるライブラリです。

ポップオーバーにおける必要最低限のアニメーションが実装されており、ポップオーバーで表示できるコンテンツをカスタマイズできます。

また React の props を使って、ポップオーバーの挙動の調整もできます。

どんな形でポップオーバーが表示されるかは、公式のStorybook があるので、そちらからざっくり確認できます。

インストール方法

yarn でパッケージ管理している場合は、下記でインストールできます。

$ yarn add react-popover

サンプルコード

ボタンでポップオーバーを出し分ける、簡単なサンプルコードを書いてみました。

import React from "react";
import ReactDOM from "react-dom";
import Popover from "react-popover";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false };
  }

  togglePopover = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  render() {
    return (
      <div className="App">
        <Popover
          isOpen={this.state.isOpen}
          body={<div className="Balloon">Popover Content</div>}
        >
          <button onClick={this.togglePopover}>Toggle Popover</button>
        </Popover>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Popover の isOpen props を切り替えることで、ポップオーバーの表示を制御するイメージです。

ボタン押下時に、body props に定義した jsx をポップオーバーとして表示しています。

こちらを実際に動かすと、以下のような感じになります。

現状、ポップオーバーに何もスタイルをあてていないため、最低限の表示になっていますが、こちらに対してスタイルを適用していく形になります。

react-popover の props について

ポップオーバーを制御する props は README にまとまっていますが、最低限以下をおさえていれば使えると思います。

prop	内容
isOpen	ポップオーバーの表示・非表示を制御
body	ポップオーバーで表示させる Content
place	ポップオーバーを上下左右どの方向から表示させるか(above/right/below/left)
onOuterAction	ポップオーバー外のエレメントで mousedown か touchstart イベントを発生させたときのアクション

所感

react-popover は、bootstrap といったCSSフレームワークは使わないが、ポップオーバーだけ React で簡単に実装したい、という場合に使えそうだなと思いました。

ただ、README が必要最低限の使い方の説明しかされていないので、実際にサンプルコードを動かしながら動きを掴んでいったほうが良さそうです。