Abeautiful,materialized,easytouseandflexibleReactSelectreplacement
DemoCheckoutthedemoanduseexampleshere!
Installingnpmi--save-devreact-selectrixDocumentationhttps://github.com/stratos-vetsos/react-selectrix/
ImporttoyourprojectimportSelectrixfrom"react-selectrix";BasicExample<Selectrixmultiple={true}materialize={true}options={[{key:"javascript",label:"Javascript"},{key:"go",label:"Go"},{key:"ruby",label:"RubyOnRails"},{key:"php",label:"PHP"}]}onChange={value=>console.log(value)}/>PropsNameTypeDefaultValueDescriptionoptionsarray[]Anarrayoftheavailableoptions(Objectswith"key","label"pairsandoptionally"disabled"property).multiplebooleanfalseWhethertheSelectsupportsmultiplevalues.searchablebooleantrueWhethertheSelectissearchable.noResultsMessagestringNoresultsmatchThemessageofthenoresultsmatch.materializebooleantrueWhetherthestyleoftheSelectshouldbeMaterializedordefault.defaultValueboolean/array/stringfalseIfyouhavepreselectedvaluesusethisproperty.Useanarrayofoptionkeysformultipleselections,orkeyasastringforsingleselection.checkBoxesbooleanfalseSetthistotrueifyouwanttorenderCheckboxesinsteadoflistitems.heightnumber190Theheightofthedropdown.placeHolderInsidebooleanfalseIftheplaceholdershouldbeanoption.placeholderstringPleaseSelectTheplaceholderoftheSelect.isOpenbooleanfalseIftheSelectshouldberenderedopen.arrowbooleantrueWhethertoshowanarrowonSelect'sheader.disabledbooleanfalseWhethertheSelectshouldbedisabled.customScrollbarbooleanfalseAcustomscrollbar(onlyforChrome)stayOpenbooleanfalseIftheSelectshouldstayopenornot.commaSeperatedbooleanfalseIfyouwanttheselectedvaluestobeacommaseperatedstring,turnthisto"true".(Availableonlywithmultiplepropsetto"true".)singleLinebooleanfalseWheretheselectedvalues(Select'sHeader)shouldbecontainedtooneline.lifobooleanfalseLastInFirstOutMode.Theuser'slastselection,goesfirst.(Availableonlywithmultiplepropsetto"true".)searchIndexbooleantrueEnablesearchbybothIndexandValuefieldsselectAllButtonbooleanfalseWhethera"selectallbutton"shouldbevisibleonSelect'sheader.isDropDownbooleantrueSetthistotrueifyouwanttousetheSelectasaDropdown.Whenyouselectanoption,theSelectcollapsesandtheheadercontinuetohavetheplaceholderasavalue.tagsbooleanfalseWhethertosupportcustomtags.customKeysobject/booleanfalsePassanobjecttochangethedefaultoptionkeys(key,label).ExampleSyntax:{key:"url",label:"title"},tochangethekeyto"url"andthelabelto"title".ajaxboolean/objectfalseWhethertoenableajax.ThelibrarysupportsasynchronouscallsthroughfetchAPI.Availabledefaultpropertiesofajaxobject:{url:'',headers:{},debounce:200,fetchOnSearch:false,q:"",nestedKey:false,searchPrompt:true,minLength:1}.Youcanfinddetailsforalltheajaxobjectproperties,inthenextsectionandinourdemopage.onRenderOptionfunction/booleanfalseUsethisfunctiontorendercustomoptionitemsonRenderSelectionfunction/booleanfalseUsethisfunctiontorendercustomselecteditemsonChangefunctionundefinedUsethiscallbacktocatchSelect'schangetrigger.onOpenfunctionundefinedUsethiscallbacktocatchSelect'sopentrigger.onClosefunctionundefinedUsethiscallbacktocatchSelect'sclosetrigger.Ajaxprop-breakdownNameTypeDefaultValueDescriptionurlstring''TheurlwhichtheSelectgoingtofetchtheavailableoptions.headersobject{}Passanyheadersyouwanttofetchapi.debouncenumber200Thedebounceoftheajaxcallsinmilliseconds.fetchOnSearchbooleanfalseWhetheryoudon'twanttohavetheoptionsprepopulated,whentheSelectopens,butyouwanttoquerythembasedonuser'ssearchvalue.qstring''ThispropertygoesalongsidewithfetchOnSearchproperty,settedto"true".DependingtheRESTAPIprovidingyouwithoptions,youhavetochangethisvalueaccordingly.e.g."&search={q}".Whereveryouusethepseudovariable{q},theuser'ssearchquerywillinjectedinthefinalrequest.nestedKeystring/booleanfalseIfyourRESTAPIreturnstheactualdatainadeeperlevel,insideanestedkey,let'ssay"articles",setnestedKeyto"articles".searchPromptbooleantrueThispropertygoesalongsidewithfetchOnSearchpropertyandindicatestheuserhowmanymorecharactersshouldtype,beforetheajaxsearchwillhappen.minLengthnumber1ThispropertygoesalongsidewithfetchOnSearchpropertyandsearchPromptsettedto"true".Itistheminlengthofcharacterstheusershouldtype,beforetheajaxcallsearchtakesplace.Callbacks-breakdownNameArgumentsDescriptiononChangevalueTheselectedobjectiftheSelectissingleandanarrayofobjectsiftheSelectismultiple.onRenderOptionoption,indexTheoptionwhichisgoingtoberenderedandit'scorrespondingindex.onRenderSelectionselected,settings,deselectTheselectedobject,theSelect'ssettingsandacallbackfunctiontousefordeselection.onOpenN/AonCloseN/AAjaxExampleManythankstonewsapi.orgfortheirgreatapi.Checkthisexampleinaction,inourdemopage.
<SelectrixcustomKeys={{key:"url",label:"title"}}ajax={{url:"https://newsapi.org/v2/everything?q=bitcoin&sortBy=publishedAt&apiKey=9342a9a707ca49c4b2da34e9ea238ea6",nestedKey:"articles"}}/>AjaxExamplewithfetchOnSearchCheckthisexampleinaction,inourdemopage.
<Selectrixmultiple={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}}/>TagsExampleCheckthisexampleinaction,inourdemopage.
<Selectrixmultiple={true}materialize={true}tags={true}options={[{key:"hotdog",label:"HotDog"},{key:"pizza",label:"Pizza"}]}onChange={value=>console.log(value)}/>CustomRenderExampleCheckthisexampleinaction,inourdemopage.
<Selectrixmultiple={true}materialize={true}options={[{key:"javascript",label:"Javascript"},{key:"go",label:"Go"},{key:"ruby",label:"RubyOnRails"},{key:"php",label:"PHP"}]}onRenderOption={onRenderOption}onRenderSelection={onRenderSelection}onChange={value=>console.log(value)}/>constonRenderOption=(option,index)=>(<span><iclassName="fafa-laptop"></i>{option.label}</span>)constonRenderSelection=(selected,settings,deselect)=>(<spanstyle={{marginRight:10,border:"1pxsolid#eee",padding:5}}>{selected.label}<istyle={{paddingLeft:5,cursor:"pointer"}}onClick={deselect}className="fafa-window-close"></i></span>)LicenseMITLicensed.StratosVetsos.
ContributionsContributionsaremorethanwelcome.Runnpminstall&&npmstartonmasterandyouaregoodtogo!TheCONTRIBUTING.mdisgoingtobepublishedsoon.
评论