【JavaScript】【React】React Autosuggestを使ってみる
はじめに
Reactでオートサジェスト（オートコンプリート）機能を実現するコンポーネントである、React Autosuggestについて、使い方を調べてみたのでこのエントリで紹介したいと思います。
環境
- React Autosuggest version 10.1.0
React Autosuggestとは
Reactでオートサジェスト（オートコンプリート）機能を実現するコンポーネントです。入力部分に文字を入力すると、しその下部に、入力内容に応じた候補一覧が表示されます。また、表示された候補の1つをクリックすることで、入力部分に、選択した候補に応じた内容が入力されます。
ちなみにauto suggestと名前がついていますが、コンポーネント自体にキーワードを絞り込むような機能は一切なく、ユーザーが実装しなければなりません。
React Autosuggest公式
https://react-autosuggest.js.org/簡単な使い方
使い方は公式のチュートリアルを見れば大体わかると思いますが、少し手を加え、サーバーと通信することにします。また、クラスコンポーネントで書かれているので、関数コンポーネントで書き直してみます。
サーバーは次のような動作をします。
- 入力した文字列をサーバーにGETで渡す
- サーバーは渡された文字列で始まる文字列の配列をJSONで返す
サーバーは次のような言語名の一覧を持っているとします。ここから、サーバーは渡された文字列で始まる言語名のみをクライアントへ返します。たとえば、"C"を渡した場合は、"C", "C++", "C#", "COBOL"を返します。
[
"Basic",
"C",
"C++",
"C#",
"COBOL",
"Go",
"Fortran",
"Java",
"JavaScript",
"Julia",
"MATLAB",
"Perl",
"PHP",
"Python",
"R",
"Ruby",
"Rust"
]使用例
React Autosuggestを使用した例を以下に示します。サーバーとのやり取りにはaxiosを使いました。
import { React, useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import Autosuggest from "react-autosuggest";
const getSuggestionValue = (suggestion) => {
return suggestion;
};
const renderSuggestion = (suggestion) => {
return <span>{suggestion}</span>;
};
const App = () => {
const [inputValue, setInputValue] = useState("");
const [suggestions, setSuggestions] = useState([]);
const onChange = (event, { newValue, method }) => {
setInputValue(newValue);
};
const onSuggestionsFetchRequested = ({ value, reason }) => {
const axiosApi = axios.create({
headers: {
"Content-Type": "application/json",
},
});
axios.get("/key-suggestions", {
params: {
key: value,
},
})
.then((res) => {
setSuggestions(res.data);
})
.catch((error) => {
setSuggestions([]);
});
};
const onSuggestionsClearRequested = () => {
setSuggestions([]);
};
const inputProps = {
placeholder: "文字を入力してください",
value: inputValue,
onChange: onChange,
};
return (
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={onSuggestionsFetchRequested}
onSuggestionsClearRequested={onSuggestionsClearRequested}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={inputProps}
/>
);
};
ReactDOM.render(<App />, document.getElementById("app"));React Autosuggestでは、いくつか指定できるプロパティがあります。以下は指定必須のプロパティです。
| プロパティ | 動作 |
|---|---|
suggestions | 表示する候補一覧を指定します |
onSuggestionsFetchRequested | 候補一覧が変更される時に呼び出されるコールバック関数を指定します |
onSuggestionsClearRequested | 候補一覧がクリアされる時に呼び出されるコールバック関数を指定します |
getSuggestionValue | 候補がクリックされた場合の値を返す関数を指定します |
renderSuggestion | 表示される候補のJSXを返す関数を指定します |
inputProps | 入力部分に渡すプロパティを設定します。<input>要素に使用できるプロパティは渡せるようです。最低限valueとonChangeが必要です |
ほかに以下のプロパティがあります。詳細は公式ドキュメントをご覧ください。
| プロパティ | 動作 |
|---|---|
containerProps | コンテナ（入力部分の外側にある<div>要素）に渡すプロパティを指定します |
onSuggestionSelected | 候補が選択された時に呼び出されるコールバック関数を指定します |
onSuggestionHighlighted | 候補がハイライトされた時に呼び出されるコールバック関数を指定します |
shouldRenderSuggestions | 入力部分にフォーカスされている時に、候補一覧を表示するかどうか判定するためのコールバック関数を指定します |
alwaysRenderSuggestions | 常に候補一覧を表示する場合はtrueを指定します |
highlightFirstSuggestion | 候補一覧の先頭をハイライトする場合はtrueを指定します |
focusInputOnSuggestionClick | 候補一覧をクリックしたときに入力部分をフォーカスしたままにする場合はfalseを指定します |
multiSection | セクションごとに候補を表示する場合に使用します |
renderSectionTitle | multiSectionを使用する場合に必須です |
getSectionSuggestions | multiSectionを使用する場合に必須です |
renderInputComponent | 入力部分をカスタマイズするときに使用します |
renderSuggestionsContainer | 候補一覧部分をカスタマイズするときに使用します |
theme | コンポーネントにCSSを当てるときに使用します |
id | 複数の<Autosuggest>を使うときに使用します |
スタイルを当てる
React Autosuggestは独自のスタイルを持っていませんので、自前でスタイルを当てる必要があります。公式ドキュメントによると、react-themeableに対応しており、themeに対応するクラス名でCSSを記述することによりスタイルを当てることができます。
デフォルトでは以下のクラスが対応しています。
{
container: "react-autosuggest__container",
containerOpen: "react-autosuggest__container--open",
input: "react-autosuggest__input",
inputFocused: "react-autosuggest__input--focused",
suggestionsContainer: "react-autosuggest__suggestions-container",
suggestionsContainerOpen: "react-autosuggest__suggestions-container--open",
suggestionsList: "react-autosuggest__suggestions-list",
suggestion: "react-autosuggest__suggestion",
suggestionFirst: "react-autosuggest__suggestions--first",
suggestionHighlighted: "react-autosuggest__suggestions--highlighted",
sectionContainer: "react-autosuggest__section-container",
sectionContainerFirst: "react-autosuggest__section-container--first",
sectionTitle: "react-autosuggest__section-title",
}Global CSS
デフォルトで設定されているクラス名でCSSを記述します。また、独自のクラス名でCSSを記述した場合は、次のようにthemeオブジェクトを指定し、<Autosuggest>コンポーネントのプロパティとして渡します。
const theme = {
container: containerに対応する独自のクラス名,
...
};
return <Autosuggest theme={theme} ... />;CSS Modules
別のファイルにCSSを記述します。クラス名はテーマと同じにします。CSSのファイル名は.module.cssで終わる必要があるので注意が必要です。拡張子の件は、公式にもreact-themeableのドキュメントにも書いてありませんが、.cssだけだとうまくいきませんでした。
.container { ... }
.containerOpen { ... }
.input { ... }
...作成したファイルをインポートし、<Autosuggest>コンポーネントのプロパティとして渡します。
import theme from "sample.module.css";
return <Autosuggest theme={theme} ... />;Bootstrap
Bootstrapで使うには、以下の記事が参考になります。
https://crieit.net/posts/react-autosuggest-Bootstrapおわりに
Reactでオートサジェスト（オートコンプリート）機能を実現するコンポーネントである、React Autosuggestについて、使い方を調べてみました。公式ドキュメントが古く、注意する点がありましたので、こちらの記事が参考になれば幸いです。