A react component to manage nested select tags

Apr 08, 2021
A react component to manage nested select tags

nested Selects React

A react component to manage nested <select> tags.

View Demo View Github

install with npm:

npm i nested-selects-react

install with yarn:

yarn add nested-selects-react

in case you want to use it fast

import React, { useState } from 'react'; import { NestedSelects, Select, Option, MakeVisible } from 'nested-selects-react'; function MyForm(){ const [ state, setState ] = useState({ nestedSelectsValues: null }); // to get the <Select>'s data const getValues = data => setState({ ...state, nestedSelectsValues: data }); const handleSubmit = ev => { ev.preventDefault(); console.log(state); } return( <form onSubmit={() => false}> {/* nested-selects-react code */} <NestedSelects getvalues={getValues}> {/* first principal select */} <Select name="first-select" label="first select"> <Option value="sel1-option1">sel1 option 1</Option> <Option value="sel1-option2">sel1 option 2</Option> </Select> {/* second principal select */} <Select name="second-select" label="first select"> <Option value="sel2-option1">sel2 option 1</Option> {/* trigger option */} <Option value="sel2-option2"> sel2 option 2 trigger <MakeVisible> <Select name="sub-select" label="Wow! check this out, a sub select!"> <Option value="sub-sel-option1">option 1</Option> <Option value="sub-sel-option1">option 2</Option> </Select> </MakeVisible> </Option> </Select> </NestedSelects> <button type="button" onClick={handleSubmit}>save</button> </form> ) } export default MyForm;

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