cpr-select

A consistently styled cross-browser and keyboard friendly select component

Usage no npm install needed!

<script type="module">
  import cprSelect from 'https://cdn.skypack.dev/cpr-select';
</script>

README

cpr-select Build Status

Canopy React Select

Requirements

  • React ^0.14.2
  • Lodash methods findIndex

Installation

  1. Install through npm install --save cpr-select
  2. Load the required stylesheet src/select.css
  3. Optional - if you want some default styling use the stylesheet: build/external-styles.css

Usage

Props

  • selected: the key of the currently selected item
  • options: the items to select from. You can insert a separator between items by putting {separator: true} as an item. You can also prevent the user from selecting an item by including disabled: true in your item object.
  • onChange: called when selected item changes
  • onBlur: called when the select widget is blurred (with the currently selected item)
  • disabled: pass true to disable the input
  • placeholder: placeholder for input
  • selectClass: (optional) custom class to be added to the select element
  • outerClass: (optional) custom class to be added to the outer containing element
  • inputClass: (optional) custom class to be added to the hidden input element
  • dropdownClass: (optional) custom class to be added to the dropdown element
  • zIndex: (optional) override the default z-index of 1000

Basic

import CanopySelect from 'cpr-select';
import 'cpr-select/src/select.css';

let items = [
  {
    "value": "Alabama",
    "key": "AL"
  }, {
    "separator": true,
  }, {
    "value": "Alaska",
    "key": "AK"
  }, {
    "value": "American Samoa",
    "key": "AS",
    "disabled": true
  }
];

function itemsChanged(key, item, index) {
  console.log(key);
}

<CanopySelect options={items} onChange={itemsChanged} placeholder="Select a country" selected="AK"></CanopySelect>

Demo

http://canopytax.github.io/cpr-select/