nested-selects-react

nestedSelectsReact

A react component to manage nested <select> tags.

install with npm:

npm i nested-selects-react

install with yarn:

yarn add nested-selects-react

Demo and docs

in case you want to use it fast

importReact,{useState}from'react';import{NestedSelects,Select,Option,MakeVisible}from'nested-selects-react';functionMyForm(){const[state,setState]=useState({nestedSelectsValues: null});// to get the <Select>'s dataconstgetValues=data=>setState({ ...state,nestedSelectsValues: data});consthandleSubmit=ev=>{ev.preventDefault();console.log(state);}return(<formonSubmit={()=>false}>{/* nested-selects-react code */}<NestedSelectsgetvalues={getValues}>{/* first principal select */}<Selectname="first-select"label="first select"><Optionvalue="sel1-option1">sel1 option 1</Option><Optionvalue="sel1-option2">sel1 option 2</Option></Select>{/* second principal select */}<Selectname="second-select"label="first select"><Optionvalue="sel2-option1">sel2 option 1</Option>{/* trigger option */}<Optionvalue="sel2-option2">
sel2 option 2 trigger
<MakeVisible><Selectname="sub-select"label="Wow! check this out, a sub select!"><Optionvalue="sub-sel-option1">option 1</Option><Optionvalue="sub-sel-option1">option 2</Option></Select></MakeVisible></Option></Select></NestedSelects><buttontype="button"onClick={handleSubmit}>save</button></form>)}exportdefaultMyForm;

nested-selects-react comes without styles. If you want to add styles please check docs. it's very easy

Demo and docs

License

MIT © carlos martinez

Powered by create-react-library