react-selectize

React Selecitze

A flexible & stateless select component for ReactJS built with livescript and love. ReactSelectize comes in 3 favours SimpleSelect (or single select), MultiSelect & ReactSelectize. Both the SimpleSelect & the MultiSelect components are built on top of the stateless ReactSelectize component.

LIVE DEMO: furqanZafar.github.io/react-selectize

Install

npm install react-selectize

Usage (livescript)

{create-factory}:React = require \react
{SimpleSelect, MultiSelect, ReactSelectize} = require \ReactSelectize
SimpleSelect = create-factory SimpleSelect
MultiSelect = create-factory MultiSelect
.
.
.
SimpleSelect do     
    placeholder: 'Select a fruit'
    options: <[apple mango orange banana]> |> map ~> label: it, value: it
    on-value-change: (value, callback) ~>
        alert value
        callback!
.
.
.
MultiSelect do
    placeholder: 'Select fruits'
    options: <[apple mango orange banana]> |> map ~> label: it, value: it
    on-values-change: (values, callback) ~>
        alert values
        callback!

Usage (jsx)

React = require("react");
ReactSelectize = require("ReactSelectize");
SimpleSelect = React.createFactory(ReactSelectize.SimpleSelect);
MultiSelect = React.createFactory(ReactSelectize.MultiSelect);
.
.
.
<SimpleSelect
    placeholder = "Select a fruit"
    options = ["apple", "mango", "orange", "banana"].map(function(fruit){
        return {label: fruit, value: fruit};
    });
    onValueChange = {function(value, callback){
        alert(value);
        callback();
    }}
/>
.
.
.
<MultiSelect
    placeholder = "Select fruits"
    options = ["apple", "mango", "orange", "banana"].map(function(fruit){
        return {label: fruit, value: fruit};
    });
    onValuesChange = {function(values, callback){
        alert(values);
        callback();
    }}
/>

Usage (stylus)

to include the default styles when using SimpleSelect component, add the following import statement to your stylus file:

@import 'node_modules/react-selectize/src/SimpleSelect.css'

to include the default styles when using MultiSelect component, add the following import statement to your stylus file:

@import 'node_modules/react-selectize/src/MultiSelect.css'

SimpleSelect Props

Property                |   Type                             |   Description

:---------------------------|:-----------------------------------|:-------------------------------- className | String | class name for the outer element, in addition to "simple-select" disabled | Boolean | disables interaction with the Select control createFromSearch | [Item] -> String -> Item? | implement this function to create new items on the fly, function(options, search){return {label: search, value: search}}, return null to avoid option creation for the given parameters filterOptions | [Item] -> Item -> String -> [Item] | implement this function for custom filtering logic, function(options, value, search) {return options} onBlur | Item -> String -> Void | function(value, reason){} reason can be either "click" (loss of focus because the user clicked elsewhere), "tab" or "blur" (invoked refs.simpleSelect.blur()) onFocus | Item -> String -> Void | function(value, reason){} reason can be either "event" (when the control gains focus outside) or "focus" (when the user invokes refs.simpleSelect.focus()) onSearchChange | String -> (a -> Void) -> Void | function(search, callback){self.setState({search: search}, callback);} or function(search,callback){callback();} i.e. callback MUST always be invoked onValueChange | Item -> (a -> Void) -> Void | function(selectedValue, callback){self.setState({selectedValue: selectedValue}, callback)} or function(value, callback){callback()} i.e. callback MUST always be invoked options | [Item] | list of items by default each option object MUST have label & value property, otherwise you must implement the render* & filterOptions methods placeholder: | String | displayed when there is no value renderNoResultsFound | Item -> String -> ReactElement | function(item, search){return React.DOM.div(null);} returns a custom way for rendering the "No results found" error renderOption | Int -> Item -> ReactElement | function(index, item){return React.DOM.div(null);} returns a custom way for rendering each option renderValue | Int -> Item -> ReactElement | function(index, item){return React.DOM.div(null);} returns a custom way for rendering the selected value restoreOnBackspace | Item -> String | function(item){return item.label;} implement this method if you want to go back to editing the item when the user hits the [backspace] key instead of getting removed search | String | the text displayed in the search box style | Object | the CSS styles for the outer element value | Item | the selected value, i.e. one of the objects in the options array

MultiSelect Props

In addition to the props above

Property                |   Type                               |   Description

:---------------------------|:-------------------------------------|:-------------------------------- createFromSearch | [Item] -> [Item] -> String -> Item? | function(options, values, search){return {label: search, value: search}} filterOptions | [Item] -> [Item] -> String -> [Item] | function(options, values, search){return options} onBlur | [Item] -> String -> Void | function(values, reason){} onFocus | [Item] -> String -> Void | function(values, reason){} onValuesChange | [Item] -> (a -> Void) -> Void | function(values, callback){callback();}

Development

• npm install
• copy the following to config.ls

module.exports = 
    minify: true

• gulp
• visit localhost:8000