[React Bootstrap] Popovers を表示してみる | 心を無にして始める React

2022-08-02

今回は、Popover コンポーネントを表示します。

準備

まだ components フォルダがなければ作ります。

src を右クリックして New Folder 。

components と入力してフォルダを作ります。

今回は、components フォルダに Popover のコンポーネントを作って、表示してみます。

公式のドキュメントはここ。

https://react-bootstrap.github.io/components/overlays/#popovers

Popover コンポーネントをつくる

component フォルダに Popover.js を作ります。

Popover.js を心を無にして編集してみます。

import React from 'react';
import { Popover as BootstrapPopover } from 'react-bootstrap';

const Popover = React.forwardRef((props, ref) => {
  const {
    title,
    children,
    ...otherProps
  } = props;

  return (
    <BootstrapPopover {...otherProps} ref={ref}>
      {
        title && (
          <BootstrapPopover.Header as="h3">
            {title}
          </BootstrapPopover.Header>
        )
      }
      <BootstrapPopover.Body>
        {children}
      </BootstrapPopover.Body>
    </BootstrapPopover>
  )
});

export default Popover;

プロジェクトでは、コンポーネントを統一したデザインで利用することが多いです。

そのため、（React Bootstrap のコンポーネントをその場その場でカスタマイズしながら使うよりも、）プロジェクトでコンポーネントにしたものを使うほうが、変更をお手軽に漏れなくできることが多いです。

Popover コンポーネントを表示する

それでは、 App.js を編集して Popover コンポーネントを表示します。

import React from 'react';
import './App.css';

import OverlayTrigger from './components/OverlayTrigger';
import Popover from './components/Popover';

function App() {
  return (
    <>
      <div className="p-5 bg-dark">
        <div className="p-5 d-flex flex-column justify-content-center align-items-center">
          <OverlayTrigger
            placement="right"
            trigger={["hover"]}
            delay={{ show: 250, hide: 400 }}
            overlay={
              <Popover title="Popover Sample">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </Popover>
            }
          >
            <div className="p-5 bg-light d-flex justify-content-center align-items-center rounded">
              <h1>BASE</h1>
            </div>
          </OverlayTrigger>
        </div>
      </div>
    </>
  );
}

export default App;

画面を確認してみます。

はい、できました。