「React.js」ライブラリreact-menuをインストールして実装するサンプル

2022年9月25日

環境
Windows 11 Pro 64bit
node v16.16.0
npm 8.11.0
React 18.2.0

操作方法
1.react.js環境を構築します。
「reactdemo」という名前でプロジェクトを作成してます。

>cd C:\study\react\r
>create-react-app reactdemo

2.作成したプロジェクトに移動します。
>cd reactdemo

3.react-menuをインストールします。

>npm install @szhsin/react-menu

4.「src\test.js」に下記コードを記載します。

import React from 'react'
import {
  Menu,
  MenuItem,
  MenuButton,
  SubMenu
} from '@szhsin/react-menu';
import '@szhsin/react-menu/dist/index.css';

const Test = () => {

  return (
    <div>

      <Menu menuButton={<MenuButton>検証</MenuButton>}>
        <SubMenu label="操作">
          <MenuItem>更新</MenuItem>
          <MenuItem>削除</MenuItem>
        </SubMenu>
      </Menu>

    </div>
  );
}

export default Test;

5.「src\App.js」に下記コードを記載します。

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

function App() {
  const style = {
    width: "40%",
    marginTop: 150
  };
  return (
    <div className="App">
      <div style={style}>
        react-menuの操作サンプル<Test />
      </div>
    </div>
  );
}

export default App;

6.下記コマンドを実行します

>npm start

7.動作確認
ブラウザから http://プライベートIP:3000にアクセスします。
「検証」->「操作」を押すと，「更新」と「削除」メニューが表示されます。