react-simpler-select

3.0.0 • Public • Published

react-simpler-select npm Build Status Coverage Status

React component that renders a select. Supports optgroups, multiple selections.

Check out the online demo!

Features

  • Renders a plain, accessible HTML <select>.
  • Generates <option> elements itself from the expected data structure.
  • Has a placeholder prop to create a placeholder option at the top of the select.
  • Generates <optgroup> elements if the options follow the expected data structure.
  • onChange returns supports single and multiple values in a convenient format.

Installation

npm install --save react-simpler-select

Usage

import Select from 'react-simpler-select';
 
const options = [
  { value: 'en', label: 'English' },
  { value: 'es', label: 'Spanish' },
];
 
<Select
  placeholder="Choose a language"
  value="en"
  options={options}
  onChange={onChange}
/>
 
// Add props as you go, they will be transfered to the `select` element.
<Select
  value="en"
  options={options}
  onChange={this.handleChange}
  autoFocus
/>
 
// Supports `optgroup`s 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' } ]
  },
];
 
<Select options={optgroups}/>
 
// Supports `multiple` select. Just make the `value` prop an array, and get selected options as an array in the `onChange` callback.
<Select value={[ 'ch', 'qt']}/>

Development

Install

Clone the project on your computer, and install Node. This project also uses nvm.

nvm install
# Then, install all project dependencies. 
npm install
# Install the git hooks. 
./.githooks/deploy

Working on the project

Everything mentioned in the installation process should already be done.

# Make sure you use the right node version. 
nvm use
# Start the server and the development tools. 
npm run start
# Runs linting. 
npm run lint
# Runs tests. 
npm run test
# View other available commands with: 
npm run

Releases

  • 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.
npm run dist
# Use 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!

Package Sidebar

Install

npm i react-simpler-select

Weekly Downloads

3

Version

3.0.0

License

MIT

Last publish

Collaborators

  • yuzima
  • synecdokey
  • springloaders
  • thibaudcolas
  • holloway