React component that renders a select. Supports optgroups, multiple selections.
npm install react-simpler-select> React component that renders a select. Supports optgroups, multiple selections.
Check out the online demo!
- Renders a plain, accessible HTML .
- Generates elements itself from the expected data structure.
- Has a placeholder prop to create a placeholder option at the top of the select.
- Generates elements if the options follow the expected data structure.
- onChange returns supports single and multiple values in a convenient format.
``sh`
npm install --save react-simpler-select
`jsx
import Select from 'react-simpler-select';
const options = [
{ value: 'en', label: 'English' },
{ value: 'es', label: 'Spanish' },
];
placeholder="Choose a language"
value="en"
options={options}
onChange={onChange}
/>
// Add props as you go, they will be transfered to the select element.
value="en"
options={options}
onChange={this.handleChange}
autoFocus
/>
// Supports optgroups with their own array of options.
const optgroups = [
{
title: 'North Island',
id: 'ni',
options: [ { value: 'wgtn', label: 'Wellington' }, { value: 'gsb', label: 'Gisbourne' } ]
},
{
title: 'South Island',
id: 'si',
options: [ { value: 'ch', label: 'Christchurch' }, { value: 'qt', label: 'Queenstown' } ]
},
];
// Supports multiple select. Just make the value prop an array, and get selected options as an array in the onChange callback.`
> Clone the project on your computer, and install Node. This project also uses nvm.
`sh`
nvm installThen, install all project dependencies.
npm installInstall the git hooks.
./.githooks/deploy
> Everything mentioned in the installation process should already be done.
`sh`Make sure you use the right node version.
nvm useStart the server and the development tools.
npm run startRuns linting.
npm run lintRuns tests.
npm run testView other available commands with:
npm run
- Make a new branch for the release of the new version.
- Update the CHANGELOG.
- Update the version number in package.json, following semver.
- Make a PR and squash merge it.
- Back on master with the PR merged, follow the instructions below.
`sh``
npm run distUse irish-pub to check the package content. Install w/ npm install -g first.
irish-pub
npm publish
- Finally, go to GitHub and create a release and a tag for the new version.
- Done!