react select

反応選択

Reactの選択コントロール。最初はKeyStoneJSで使用するために構築されました。

ライブデモと包括的なドキュメントについては、React-select.comを参照してください。

react-select ThinkmillとAtlassianによって資金提供されています。私たちは、コミュニティによって継続的にサポートされているオープンソースプロジェクトです。

React Selectは、自分にとって重要な部品をカスタマイズすることを止めることなく、箱から出して作業するだけの強力な選択コンポーネントを開発するのに役立ちます。

このコンポーネントの背後にあるストーリーについては、JedのTalk at React Conf 2019 -Building React Selectをご覧ください

機能は次のとおりです。

• カスタマイズ可能な機能を備えたデータへの柔軟なアプローチ
• 感情を備えた拡張可能なスタイリングAPI
• UIの動作を完全に制御するためのコンポーネントインジェクションAPI
• 制御可能な州の小道具とモジュラーアーキテクチャ
• オプショングループ、ポータルサポート、アニメーションなどの長期にわたる機能

古いバージョンを使用しますか？

• V3、V4、およびV5アップグレードガイド
• V2アップグレードガイド
• React Select V1ドキュメントと例はV1.React-Select.comで入手できます。

インストールと使用

React-Selectを使用する最も簡単な方法は、npmからインストールし、Webpackを使用してアプリに組み込むことです。

 yarn add react-select

次に、アプリで使用します。

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

const options = [
  { value : 'chocolate' , label : 'Chocolate' } ,
  { value : 'strawberry' , label : 'Strawberry' } ,
  { value : 'vanilla' , label : 'Vanilla' } ,
] ;

export default function App ( ) {
  const [ selectedOption , setSelectedOption ] = useState ( null ) ;

  return (
    < div className = "App" >
      < Select
        defaultValue = { selectedOption }
        onChange = { setSelectedOption }
        options = { options }
      / >
    < / div >
  ) ;
} 

小道具

指定したい一般的な小道具は次のとおりです。

• autoFocus - マウント時にコントロールに焦点を合わせます
• classNameクラス名をコントロールに適用します
• classNamePrefix指定されたプレフィックスを使用して内部要素にクラス名を適用します
• isDisabledコントロールを無効にします
• isMultiユーザーが複数の値を選択できるようにします
• isSearchableユーザーがマッチングオプションを検索できるようにします
• name - 現在の値を含むこの名前でHTML入力を生成します
• onChange -Eventsの変更を購読します
• options - ユーザーが選択できるオプションを指定します
• placeholder - オプションが選択されていないときに表示されるテキストを変更します
• noOptionsMessage -（{inputValue：string}）=> string | null-オプションがないときに表示するテキスト
• value - 現在の値を制御します

Props React-Selectサポートに関する完全なドキュメントについては、Propsドキュメントを参照してください。

制御可能な小道具

それらに値を提供することにより、次の小道具を制御できます。そうしないと、React-Selectがそれらを管理します。

• value / onChangeコントロールの現在の値を指定します
• menuIsOpen / onMenuOpen / onMenuCloseメニューが開いているかどうかを制御する
• inputValue / onInputChange検索入力の値を制御します（これにより利用可能なオプションが更新されます）

これらの小道具を提供しない場合、それらが管理する状態の初期値を設定できます。

• defaultValueコントロールの初期値を設定します
• defaultMenuIsOpenメニューの初期オープン値を設定します
• defaultInputValue検索入力の初期値を設定します

方法

React-Selectは2つのパブリック方法を公開します。

• focus() - プログラムでコントロールをフォーカスします
• blur() - プログラムでコントロールをぼかします

カスタマイズ

詳細については、以下を確認してください。

• スタイルのカスタマイズ
• カスタムコンポーネントを使用します
• 組み込みのアニメーションコンポーネントを使用します
• 非同期選択を作成します
• ユーザーが新しいオプションを作成できるようにします
• 高度なユースケース
• タイプスクリプトガイド

タイプスクリプト

V5リリースは、JavaScriptからTypeScriptへの書き換えを表します。 V4以前のリリースと以前のリリースのタイプは、@Typesで入手できます。 V5で始まるタイプを使用する方法については、TypeScriptガイドを参照してください。

ありがとう

このプロジェクトに貢献してくれたすべての人に感謝します。それはワイルドライドでした。

React Selectが好きなら、Twitterで私をフォローする必要があります！

ジョス・マッキソン、チャールズ・リー、ベン・コノリー、トム・ウォーカー、ネイサン・ビエマ、エリック・ボノウ、エマ・ハミルトン、デイブ・ブラザーズ、ブライアン・ヴォーン、および他の多くの貢献者とともにこれを可能にしたアトラシアン・デザイン・システムチーム

ライセンス

MITライセンス。 Copyright（c）Jed Watson 2022。