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 ) }
/>

소품

이름	유형	기본값	설명
옵션	정렬	[]	사용 가능한 옵션의 배열("키", "레이블" 쌍 및 선택적으로 "비활성화" 속성이 있는 개체)
다수의	불리언	거짓	Select가 여러 값을 지원하는지 여부입니다.
검색 가능	불리언	진실	Select가 검색 가능한지 여부입니다.
noResults메시지	끈	일치하는 결과가 없습니다	일치하는 결과가 없다는 메시지입니다.
구체화하다	불리언	진실	Select의 스타일이 구체화 되어야 하는지 아니면 기본값이어야 하는지 여부입니다.
기본값	부울/배열/문자열	거짓	값을 미리 선택한 경우 이 속성을 사용하세요. 다중 선택을 위해서는 옵션 키 배열을 사용하고, 단일 선택을 위해서는 문자열로 키를 사용하세요.
체크박스	불리언	거짓	목록 항목 대신 확인란을 렌더링하려면 이를 true로 설정하십시오.
키	숫자	190	드롭다운의 높이입니다.
placeHolder내부	불리언	거짓	자리 표시자가 옵션이어야 하는 경우.
자리 표시자	끈	선택하세요	Select의 자리 표시자입니다.
isOpen	불리언	거짓	Select를 열어야 하는지 여부.
화살	불리언	진실	Select 헤더에 화살표를 표시할지 여부입니다.
장애가 있는	불리언	거짓	선택을 비활성화해야 하는지 여부입니다.
맞춤스크롤바	불리언	거짓	맞춤 스크롤바(Chrome에만 해당)
숙박오픈	불리언	거짓	Select가 열려 있어야 하는지 여부입니다.
쉼표로 구분됨	불리언	거짓	선택한 값을 쉼표로 구분된 문자열로 지정하려면 이 값을 "true"로 설정하세요. ( 여러 prop이 "true"로 설정된 경우에만 사용할 수 있습니다.)
단선	불리언	거짓	선택한 값( Select's Header )이 한 줄에 포함되어야 하는 위치입니다.
리포	불리언	거짓	후입선출 모드 . 사용자가 마지막으로 선택한 항목이 먼저 표시됩니다. ( 여러 prop이 "true"로 설정된 경우에만 사용할 수 있습니다.)
검색인덱스	불리언	진실	색인 및 값 필드 모두로 검색 활성화
selectAll버튼	불리언	거짓	Select 헤더에 "모두 선택 버튼"을 표시할지 여부입니다.
isDropDown	불리언	진실	Select as a Dropdown 을 사용하려면 이를 true로 설정하십시오. 옵션을 선택하면 선택이 축소되고 헤더의 값으로 자리 표시자가 계속 유지됩니다.
태그	불리언	거짓	사용자 정의 태그를 지원할지 여부입니다.
맞춤키	객체 / 부울	거짓	기본 옵션 키( key, label )를 변경하려면 객체를 전달하세요. 예 구문: `{ key: "url", label: "title" }` , 키를 "url"로 변경하고 레이블을 "title"로 변경합니다.
아약스	부울/객체	거짓	Ajax 활성화 여부. 라이브러리는 fetch API를 통한 비동기 호출을 지원합니다. Ajax 객체의 사용 가능한 기본 속성: `{ url: '', headers: {}, debounce: 200, fetchOnSearch: false, q: "", nestedKey: false, searchPrompt: true, minLength: 1 }.` 다음 섹션과 데모 페이지에서 모든 Ajax 개체 속성에 대한 세부 정보를 확인할 수 있습니다.
onRenderOption	함수 / 부울	거짓	이 기능을 사용하여 사용자 정의 옵션 항목을 렌더링하십시오.
onRenderSelection	함수 / 부울	거짓	이 기능을 사용하여 사용자 정의 선택 항목을 렌더링합니다.
변경 시	기능	한정되지 않은	이 콜백을 사용하여 Select의 변경 트리거를 포착하세요.
onOpen	기능	한정되지 않은	이 콜백을 사용하여 Select의 열린 트리거를 포착하세요.
닫기	기능	한정되지 않은	이 콜백을 사용하여 Select의 닫기 트리거를 포착하세요.

Ajax prop - 고장

이름	유형	기본값	설명
URL	끈	''	Select가 사용 가능한 옵션을 가져올 URL입니다.
헤더	물체	{}	API를 가져오려는 헤더를 전달하세요.
디바운스	숫자	200	Ajax 호출의 디바운싱은 밀리초 단위로 이루어집니다.
fetchOnSearch	불리언	거짓	선택이 열릴 때 옵션이 미리 채워지도록 하고 싶지 않지만 사용자의 검색 값을 기반으로 쿼리하려는지 여부입니다.
큐	끈	''	이 속성은 "true"로 설정된 fetchOnSearch 속성과 함께 사용됩니다. 옵션을 제공하는 REST API에 따라 이 값을 적절하게 변경해야 합니다. 예: "&검색={q}". 의사 변수 {q}를 사용할 때마다 사용자의 검색 쿼리가 최종 요청에 삽입됩니다.
중첩키	문자열 / 부울	거짓	REST API가 중첩 키 내부의 더 깊은 수준에서 실제 데이터를 반환하는 경우(예: "articles"), NestedKey를 "articles"로 설정합니다.
검색 프롬프트	불리언	진실	이 속성은 fetchOnSearch 속성과 함께 사용되며 Ajax 검색이 발생하기 전에 사용자에게 얼마나 많은 문자를 입력해야 하는지 알려줍니다.
최소 길이	숫자	1	이 속성은 fetchOnSearch 속성 및 "true"로 설정된 searchPrompt와 함께 사용됩니다. Ajax 호출 검색이 수행되기 전에 사용자가 입력해야 하는 최소 문자 길이입니다.

콜백 - 분석

이름	인수	설명
변경 시	값	Select가 단일인 경우 선택된 객체이고, Select가 다중인 경우 객체의 배열입니다.
onRenderOption	옵션, 인덱스	렌더링될 옵션과 해당 인덱스입니다.
onRenderSelection	선택됨, 설정, 선택 취소	선택한 객체, Select의 설정 및 선택 취소에 사용할 콜백 함수입니다.
onOpen	해당 없음
닫기	해당 없음

아약스 예

훌륭한 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 >
)