react selectrixダウンロード - react selectrixソースコードのダウンロード

react selectrix

その他のカテゴリー

1.0.17

ダウンロード

反応セレクトリックス

美しく具体化された、使いやすく柔軟なReact Select の代替品

デモ

ここでデモと使用例をチェックしてください。

インストール中

 npm i --save-dev react-selectrix

ドキュメント

https://github.com/stratos-vetsos/react-selectrix/

プロジェクトにインポートする

 import Selectrix from "react-selectrix";

基本的な例

 < Selectrix
	multiple = { true }
	materialize = { true }
	options = { [
		{
			key : "javascript" ,
			label : "Javascript"
		} ,
		{
			key : "go" ,
			label : "Go"
		} ,
		{
			key : "ruby" ,
			label : "Ruby On Rails"
		} ,
		{
			key : "php" ,
			label : "PHP"
		}
	] }
	onChange = { value => console . log ( value ) }
/>

小道具

名前	タイプ	デフォルト値	説明
オプション	配列	[]	使用可能なオプションの配列 (「キー」、「ラベル」のペア、およびオプションで「無効」プロパティを持つオブジェクト)。
複数	ブール値	間違い	選択が複数の値をサポートするかどうか。
検索可能	ブール値	真実	選択が検索可能かどうか。
noResultsメッセージ	弦	一致する結果はありません	結果が一致しないというメッセージ。
具現化する	ブール値	真実	選択のスタイルをマテリアライズドにするかデフォルトにするか。
デフォルト値	ブール値 / 配列 / 文字列	間違い	事前に値を選択している場合は、このプロパティを使用します。複数選択の場合はオプションキーの配列を使用し、単一選択の場合はキーを文字列として使用します。
チェックボックス	ブール値	間違い	リスト項目の代わりにチェックボックスをレンダリングする場合は、これを true に設定します。
身長	番号	190	ドロップダウンの高さ。
プレースホルダー内部	ブール値	間違い	プレースホルダーをオプションにする必要がある場合。
プレースホルダー	弦	選択してください	選択のプレースホルダー。
開いています	ブール値	間違い	選択を開いた状態でレンダリングする必要があるかどうか。
矢印	ブール値	真実	Select のヘッダーに矢印を表示するかどうか。
無効	ブール値	間違い	選択を無効にするかどうか。
カスタムスクロールバー	ブール値	間違い	カスタムスクロールバー (Chrome のみ)
泊まるオープン	ブール値	間違い	選択を開いたままにするかどうか。
カンマ区切り	ブール値	間違い	選択した値をカンマ区切りの文字列にする場合は、これを「true」に設定します。 (複数のプロパティが「true」に設定されている場合にのみ使用可能です。)
単線	ブール値	間違い	選択された値 ( Select の Header ) が 1 行に含まれる場所。
ライフ	ブール値	間違い	後入れ先出しモード。ユーザーが最後に選択したものが最初になります。 (複数のプロパティが「true」に設定されている場合にのみ使用可能です。)
検索インデックス	ブール値	真実	インデックスフィールドと値フィールドの両方による検索を有効にする
すべて選択ボタン	ブール値	間違い	「すべて選択ボタン」を選択のヘッダーに表示するかどうか。
ドロップダウンです	ブール値	真実	[ドロップダウンとして選択] を使用する場合は、これを true に設定します。オプションを選択すると、選択が折りたたまれ、ヘッダーには引き続きプレースホルダーが値として含まれます。
タグ	ブール値	間違い	カスタムタグをサポートするかどうか。
カスタムキー	オブジェクト / ブール値	間違い	デフォルトのオプションキー ( key 、 label ) を変更するオブジェクトを渡します。構文の例: `{ key: "url", label: "title" }` 、キーを "url" に、ラベルを "title" に変更します。
アヤックス	ブール値 / オブジェクト	間違い	ajaxを有効にするかどうか。このライブラリは、フェッチ API を介した非同期呼び出しをサポートしています。 Ajax オブジェクトの利用可能なデフォルトプロパティ: `{ url: '', headers: {}, debounce: 200, fetchOnSearch: false, q: "", nestedKey: false, searchPrompt: true, minLength: 1 }.`すべての ajax オブジェクトプロパティの詳細については、次のセクションとデモページを参照してください。
onRenderOption	関数 / ブール値	間違い	この関数を使用してカスタムオプション項目をレンダリングします。
onRenderSelection	関数 / ブール値	間違い	この関数を使用して、カスタム選択項目をレンダリングします。
onChange	関数	未定義	このコールバックを使用して、Select の変更トリガーをキャッチします。
開く	関数	未定義	このコールバックを使用して、Select のオープントリガーをキャッチします。
閉じる	関数	未定義	このコールバックを使用して、Select の close トリガーをキャッチします。

Ajax プロップ - 内訳

名前	タイプ	デフォルト値	説明
URL	弦	」	Select が利用可能なオプションを取得する URL。
ヘッダー	物体	{}	API を取得するヘッダーを渡します。
デバウンス	番号	200	ajax 呼び出しのデバウンス (ミリ秒単位)。
fetchOnSearch	ブール値	間違い	[選択] が開いたときにオプションを事前に入力したくないが、ユーザーの検索値に基づいてオプションをクエリするかどうか。
q	弦	」	このプロパティは、「true」に設定された fetchOnSearch プロパティと併用されます。 REST API が提供するオプションに応じて、この値をそれに応じて変更する必要があります。例: "&search={q}"。疑似変数 {q} を使用する場合は常に、ユーザーの検索クエリが最終リクエストに挿入されます。
ネストされたキー	文字列 / ブール値	間違い	REST API が実際のデータをより深いレベル (ネストされたキー、たとえば「articles」) 内で返す場合は、nestedKey を「articles」に設定します。
検索プロンプト	ブール値	真実	このプロパティは fetchOnSearch プロパティと併用され、ajax 検索が行われる前にあと何文字入力する必要があるかをユーザーに示します。
最小の長さ	番号	1	このプロパティは、fetchOnSearch プロパティと併用され、searchPrompt が "true" に設定されます。これは、ajax 呼び出しの検索が行われる前に、ユーザーが入力する必要がある文字の最小長です。

コールバック - 内訳

名前	引数	説明
onChange	価値	選択が単一の場合は選択されたオブジェクト、選択が複数の場合はオブジェクトの配列。
onRenderOption	オプション、インデックス	レンダリングされるオプションとそれに対応するインデックス。
onRenderSelection	選択、設定、選択解除	選択されたオブジェクト、選択の設定、および選択解除に使用するコールバック関数。
開く	該当なし
閉じる	該当なし

Ajax の例

素晴らしい API を提供してくれた newsapi.org に感謝します。デモページでこの例の動作を確認してください。

 < Selectrix
	customKeys = { {
		key : "url" ,
		label : "title"
	} }
	ajax = { {
		url : "https://newsapi.org/v2/everything?q=bitcoin&sortBy=publishedAt&apiKey=9342a9a707ca49c4b2da34e9ea238ea6" ,
		nestedKey : "articles"
	} }
/>

fetchOnSearch を使用した Ajax の例

デモページでこの例の動作を確認してください。

 < Selectrix
	multiple = { true }
	stayOpen = { true }
	materialize = { true }
	customKeys = { {
		key : "url" ,
		label : "title"
	} }
	ajax = { {
		url : "https://newsapi.org/v2/top-headlines?apiKey=9342a9a707ca49c4b2da34e9ea238ea6" ,
		fetchOnSearch : true ,
		q : "&q={q}" ,
		nestedKey : "articles" ,
		minLength : 3 ,
		debounce : 300
	} }
/>

タグの例

デモページでこの例の動作を確認してください。

 < Selectrix
	multiple = { true }
	materialize = { true }
	tags = { true }
	options = { [
		{
			key : "hotdog" ,
			label : "Hot Dog"
		} ,
		{
			key : "pizza" ,
			label : "Pizza"
		}
	] }
	onChange = { value => console . log ( value ) }
/>

カスタムレンダリングの例

デモページでこの例の動作を確認してください。

 < Selectrix
	multiple = { true }
	materialize = { true }
	options = { [
		{
			key : "javascript" ,
			label : "Javascript"
		} ,
		{
			key : "go" ,
			label : "Go"
		} ,
		{
			key : "ruby" ,
			label : "Ruby On Rails"
		} ,
		{
			key : "php" ,
			label : "PHP"
		}
	] }
	onRenderOption = { onRenderOption }
	onRenderSelection = { onRenderSelection }
	onChange = { value => console . log ( value ) }
/>

const onRenderOption = ( option , index ) => (
	< span > < i className = "fa fa-laptop" > </ i > { option . label } </ span >
)

const onRenderSelection = ( selected , settings , deselect ) => (
	< span style = { { marginRight : 10 , border : "1px solid #eee" , padding : 5 } } >
		{ selected . label }
		< i style = { { paddingLeft : 5 , cursor : "pointer" } } onClick = { deselect } className = "fa fa-window-close" > </ i >
	</ span >
)