A react component to manage nested select tags
nested Selects React
A react component to manage nested <select> tags.
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