ReactSelectrix
Abeautiful,materialized,easytouseadflexibleReactSelectreplacemet
DemoCheckoutthedemoaduseexampleshere!
Istalligpmi--save-devreact-selectrixDocumetatiohttps://github.com/stratos-vetsos/react-selectrix/
ImporttoyourprojectimportSelectrixfrom"react-selectrix";BasicExample<Selectrixmultiple={true}materialize={true}optios={[{key:"javascript",label:"Javascript"},{key:"go",label:"Go"},{key:"ruby",label:"RubyORails"},{key:"php",label:"PHP"}]}oChage={value=>cosole.log(value)}/>PropsNameTypeDefaultValueDescriptiooptiosarray[]Aarrayoftheavailableoptios(Objectswith"key","label"pairsadoptioally"disabled"property).multiplebooleafalseWhethertheSelectsupportsmultiplevalues.searchablebooleatrueWhethertheSelectissearchable.oResultsMessagestrigNoresultsmatchThemessageoftheoresultsmatch.materializebooleatrueWhetherthestyleoftheSelectshouldbeMaterializedordefault.defaultValueboolea/array/strigfalseIfyouhavepreselectedvaluesusethisproperty.Useaarrayofoptiokeysformultipleselectios,orkeyasastrigforsigleselectio.checkBoxesbooleafalseSetthistotrueifyouwattorederCheckboxesisteadoflistitems.heightumber190Theheightofthedropdow.placeHolderIsidebooleafalseIftheplaceholdershouldbeaoptio.placeholderstrigPleaseSelectTheplaceholderoftheSelect.isOpebooleafalseIftheSelectshouldberederedope.arrowbooleatrueWhethertoshowaarrowoSelect'sheader.disabledbooleafalseWhethertheSelectshouldbedisabled.customScrollbarbooleafalseAcustomscrollbar(olyforChrome)stayOpebooleafalseIftheSelectshouldstayopeorot.commaSeperatedbooleafalseIfyouwattheselectedvaluestobeacommaseperatedstrig,turthisto"true".(Availableolywithmultiplepropsetto"true".)sigleLiebooleafalseWheretheselectedvalues(Select'sHeader)shouldbecotaiedtooelie.lifobooleafalseLastIFirstOutMode.Theuser'slastselectio,goesfirst.(Availableolywithmultiplepropsetto"true".)searchIdexbooleatrueEablesearchbybothIdexadValuefieldsselectAllButtobooleafalseWhethera"selectallbutto"shouldbevisibleoSelect'sheader.isDropDowbooleatrueSetthistotrueifyouwattousetheSelectasaDropdow.Wheyouselectaoptio,theSelectcollapsesadtheheadercotiuetohavetheplaceholderasavalue.tagsbooleafalseWhethertosupportcustomtags.customKeysobject/booleafalsePassaobjecttochagethedefaultoptiokeys(key,label).ExampleSytax:{key:"url",label:"title"},tochagethekeyto"url"adthelabelto"title".ajaxboolea/objectfalseWhethertoeableajax.ThelibrarysupportsasychroouscallsthroughfetchAPI.Availabledefaultpropertiesofajaxobject:{url:'',headers:{},debouce:200,fetchOSearch:false,q:"",estedKey:false,searchPrompt:true,miLegth:1}.Youcafiddetailsforalltheajaxobjectproperties,itheextsectioadiourdemopage.oRederOptiofuctio/booleafalseUsethisfuctiotoredercustomoptioitemsoRederSelectiofuctio/booleafalseUsethisfuctiotoredercustomselecteditemsoChagefuctioudefiedUsethiscallbacktocatchSelect'schagetrigger.oOpefuctioudefiedUsethiscallbacktocatchSelect'sopetrigger.oClosefuctioudefiedUsethiscallbacktocatchSelect'sclosetrigger.Ajaxprop-breakdowNameTypeDefaultValueDescriptiourlstrig''TheurlwhichtheSelectgoigtofetchtheavailableoptios.headersobject{}Passayheadersyouwattofetchapi.debouceumber200Thedebouceoftheajaxcallsimillisecods.fetchOSearchbooleafalseWhetheryoudo'twattohavetheoptiosprepopulated,whetheSelectopes,butyouwattoquerythembasedouser'ssearchvalue.qstrig''ThispropertygoesalogsidewithfetchOSearchproperty,settedto"true".DepedigtheRESTAPIprovidigyouwithoptios,youhavetochagethisvalueaccordigly.e.g."&search={q}".Whereveryouusethepseudovariable{q},theuser'ssearchquerywillijectedithefialrequest.estedKeystrig/booleafalseIfyourRESTAPIreturstheactualdataiadeeperlevel,isideaestedkey,let'ssay"articles",setestedKeyto"articles".searchPromptbooleatrueThispropertygoesalogsidewithfetchOSearchpropertyadidicatestheuserhowmaymorecharactersshouldtype,beforetheajaxsearchwillhappe.miLegthumber1ThispropertygoesalogsidewithfetchOSearchpropertyadsearchPromptsettedto"true".Itisthemilegthofcharacterstheusershouldtype,beforetheajaxcallsearchtakesplace.Callbacks-breakdowNameArgumetsDescriptiooChagevalueTheselectedobjectiftheSelectissigleadaarrayofobjectsiftheSelectismultiple.oRederOptiooptio,idexTheoptiowhichisgoigtoberederedadit'scorrespodigidex.oRederSelectioselected,settigs,deselectTheselectedobject,theSelect'ssettigsadacallbackfuctiotousefordeselectio.oOpeN/AoCloseN/AAjaxExampleMaythakstoewsapi.orgfortheirgreatapi.Checkthisexampleiactio,iourdemopage.
<SelectrixcustomKeys={{key:"url",label:"title"}}ajax={{url:"https://ewsapi.org/v2/everythig?q=bitcoi&sortBy=publishedAt&apiKey=9342a9a707ca49c4b2da34e9ea238ea6",estedKey:"articles"}}/>AjaxExamplewithfetchOSearchCheckthisexampleiactio,iourdemopage.
<Selectrixmultiple={true}stayOpe={true}materialize={true}customKeys={{key:"url",label:"title"}}ajax={{url:"https://ewsapi.org/v2/top-headlies?apiKey=9342a9a707ca49c4b2da34e9ea238ea6",fetchOSearch:true,q:"&q={q}",estedKey:"articles",miLegth:3,debouce:300}}/>TagsExampleCheckthisexampleiactio,iourdemopage.
<Selectrixmultiple={true}materialize={true}tags={true}optios={[{key:"hotdog",label:"HotDog"},{key:"pizza",label:"Pizza"}]}oChage={value=>cosole.log(value)}/>CustomRederExampleCheckthisexampleiactio,iourdemopage.
<Selectrixmultiple={true}materialize={true}optios={[{key:"javascript",label:"Javascript"},{key:"go",label:"Go"},{key:"ruby",label:"RubyORails"},{key:"php",label:"PHP"}]}oRederOptio={oRederOptio}oRederSelectio={oRederSelectio}oChage={value=>cosole.log(value)}/>costoRederOptio=(optio,idex)=>(<spa><iclassName="fafa-laptop"></i>{optio.label}</spa>)costoRederSelectio=(selected,settigs,deselect)=>(<spastyle={{margiRight:10,border:"1pxsolid#eee",paddig:5}}>{selected.label}<istyle={{paddigLeft:5,cursor:"poiter"}}oClick={deselect}className="fafa-widow-close"></i></spa>)LiceseMITLicesed.StratosVetsos.
CotributiosCotributiosaremorethawelcome.Rupmistall&&pmstartomasteradyouaregoodtogo!TheCONTRIBUTING.mdisgoigtobepublishedsoo.
评论