もっと詳しく

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、React 用コンポーネントライブラリである MUI (旧Material-UI)の v5 で正式にリリースされた AutoComplete コンポーネントを触ってみたため、概要をまとめてみたいと思います。

概要

AutoComplete コンポーネントは、テキストフィールドに入力された値からオプションの選択肢を絞り込んで選択できるコンポーネントです。

選択した値はテキストフィールドの value として入ります。

入力するとサジェストが表示され、選択すると値がテキストフィールドに入る
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";

export function AutoComplete() {
  return (
    <Autocomplete
      options={[{ label: "Example1" }, { label: "ExampleExample2" }]}
      renderInput={(params) => <TextField {...params} label="Example" />}
    />
  );
}

このコンポーネントを導入するだけで、入力した値のチェックなどを実装することなく、サジェスト機能付きのテキストフィールドを使うことが出来るようになります。

カスタマイズ

構造的には MUI の TextField コンポーネントと Popper コンポーネントの組み合わせで作られています。

もちろん withStyles でスタイルを変更することが可能です。

TextField の背景色を赤にしたサンプル
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import { withStyles } from "@mui/styles";

const StyledAutocomplete = withStyles({
  inputRoot: {
    background: "pink"
  },
})(Autocomplete);

export function Autocomplete() {
  return (
    <StyledAutocomplete
      options={[{ label: "Example1" }, { label: "ExampleExample2" }]}
      renderInput={(params) => <TextField {...params} label="Example" />}
    />
  );
}

また、 renderInput に input 用コンポーネントを、 renderOption にオプション表示用コンポーネントを指定して、詳細な挙動のカスタマイズなども出来るようになっています。

以下はそれぞれのコンポーネントを変更してみたものです。

TextField の幅と背景色を変え、オプションにボーダーを追加した
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import { withStyles } from "@mui/styles";

const StyledTextField = withStyles({
  root: {
    width: "300px",
    backgroundColor: "yellow"
  }
})(TextField);

export function AutoComplete() {
  return (
    <Autocomplete
      options={[{ label: "Example1" }, { label: "ExampleExample2" }]}
      renderInput={(params) => <StyledTextField {...params} label="Example" />}
      renderOption={(props, option: { label: string }) => {
        return (
          <li {...props} style={{ borderBottom: "1px solid grey" }}>
            <div>{option.label}</div>
          </li>
        );
      }}
    />
  );
}

その他、サジェストされる選択肢がテキストフィールドに表示される autoComplete や、最初の選択肢がハイライトされる autoHighlight など多様なAPIがあります。詳しくは公式ドキュメントを参照ください。

まとめ

触ってみた感触としては、今までコンポーネントを組み合わせて複雑なコードを書きながら実装していたものが、このコンポーネントを置くだけで実装可能になるため非常に便利な存在だと感じました。

今回は、React 用コンポーネントライブラリである MUI の v5 で正式にリリースされた AutoComplete コンポーネントの概要をまとめてみました。

MUI に触れている方の参考にしていただけたら幸いです。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！

求人応募してみる！