vanilla-select
A vanilla, lightweight (~2.5kb gzipped), configurable select box component.
Advantages
- Lightweight
- No Dependencies
- Elegant API - inspiration taken from React.Component
- Fast search
Installation
With NPM:
npm install vanilla-select --save-dev
With Bower:
bower install vanilla-select --save-dev
Or include directly:
<!-- Include CSS --><!-- Include JavaScript -->
Setup
const source = icon: 'fa-font' value: 'Amatic SC' ; const select = placeholder: 'Select Font' dataset: source search: true noResults: 'No results found' ;
Configuration
Option | Definition |
---|---|
placeholder | Type: String Default: '' Placeholder text |
dataset | Type: Array Default: [] Equivelant to the element within a select |
search | Type: Boolean Default: false Whether a user should be allowed to search |
noResults | Type: String Default: '' The text that is shown when search has returned no results |
selected | Type: Object Default: null Default selected option |
onSelected | Arguments: item Callback, invoked each time the item is selected, regardless if it changes the value |
Development
To setup a local environment: clone this repo, navigate into it's directory in a terminal window and run the following command:
npm install
Browser compatibility
vanilla-select is compiled using Closure Compiler to enable support for ES5 browsers.
Browsers
Edge 15+ Chrome 41+ FireFox 35+ Opera 28+ Safari 9+
If you need to support IE11 and IE Edge14 - use vanilla-select-ie.min.js bundle. It includes element-closest polyfill.
Gulp tasks
Task | Usage |
---|---|
gulp build |
Build JS an CSS |
gulp serve |
Fire up local server for development |
Roadmap
- Keyboard navigation
License
MIT License