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

2021-10-182022-08-31

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

準備

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

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

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

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

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

https://react-bootstrap.github.io/components/button-group/

Button Group コンポーネントをつくる

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

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

import React from 'react';
import { ButtonGroup as BootstrapButtonGroup } from 'react-bootstrap';

function ButtonGroup(props) {
  const {
    children,
    ...otherProps
  } = props;

  return (
    <BootstrapButtonGroup {...otherProps}>
      {children}
    </BootstrapButtonGroup>
  )
}

export default ButtonGroup;

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

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

Button Group コンポーネントを表示する

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

Button の大きさや並べ方をまとめて指示できるので、やってみます。

import './App.css';
import Button from './components/Button';
import ButtonGroup from './components/ButtonGroup';

function App() {
  return (
    <div className="m-5">
      <ButtonGroup size="lg" vertical>
        <Button
          variant="primary"
          onClick={(cb) => setTimeout(() => cb(), 1000)}
        >
          Button
        </Button>
        <Button
          variant="outline-primary"
          onClick={(cb) => setTimeout(() => cb(), 1000)}
        >
          Outline Button
        </Button>
      </ButtonGroup>
    </div>
  );
}

export default App;

画面を確認してみます。

はい、できました。