React-Select

2022年12月18日

ゴール

ブラウザでhttp://localhost:8111を実行すると「 文字検索が可能なプルダウン 」が作成できる

目次
  1. 使用するライブラリ
  2. 手順
    1. ライブラリをインストール
    2. 1つのファイルの作成 (type.d.ts)
    3. 既存のファイルを編集
    4. 確認
  3. 参考にした資料

前提

「Hello World」が表示できる環境からスタート

使用するライブラリ

  • react-select

手順

① ライブラリをインストール

yarn add react-select

② 1つのファイルを作成
– type.d.tsを作成

type OptionType = {
  label: string;
  value: string;
};

③ 既存のファイルを編集

import React, { useState } from "react";
import Select from "react-select";

const App = () => {
  const [keyword, setKeyword] = useState<OptionType[]>([]);
  const onChange = (value: any): void => {
    setKeyword(value);
  };
  const select = [
    { value: "chocolate", label: "チョコレート" },
    { value: "strawberry", label: "イチゴ" },
    { value: "vanilla", label: "バニラ" },
  ];
  return (
    <>
      <h1>Hello World</h1>
      <Select
        options={select}
        // 複数選択
        isMulti
        // 検索可
        isSearchable
        defaultValue={keyword}
        onChange={onChange}
        placeholder="アイス"
      />
    </>
  );
};
export default App;

④ 確認
ブラウザでhttp://localhost:8111にアクセス
アイスがデフォルト文字になっている「プルダウン」が表示されていたらOK！

参考にした資料

react

Posted by shun