ReactSelectize is a stateless Select component for ReactJS, that provides a platform for the more developer friendly SimpleSelect & MultiSelect components.
Both SimpleSelect & MultiSelect have been designed to work as drop in replacement for the built-in React.DOM.Select component.
styles & features inspired by React Select & Selectize.
DEMO / Examples: furqanZafar.github.io/react-selectize
- Changelog (last updated on 10th February 2016)
- API Reference
- existing components do not behave like built-in React.DOM.* components.
- existing components synchronize props with state an anti pattern, which makes them prone to bugs & difficult for contributers to push new features without breaking something else.
- more features.
- Drop in replacement for React.DOM.Select
- Customizable themes
- Stateless, therefore extremely flexible & extensible
- Clean and compact API fully documented on GitHub
- Multiselect support
- Option groups
- Custom filtering & option object
- Search highlighting
- Custom option & value rendering
- Animated dropdown
- Remote data loading
- Tagging or item creation
- Restore on backspace
- Editable value
- Caret between items
- Customizable dropdown direction
- Mark options as unselectable
- Disable selected values
- Absolute positioned overlay, "Tether"ed to the search field
- npm:
npm install react-selectize
to include the default styles add the following import statement to your stylus file:
@import 'node_modules/react-selectize/themes/index.css'
bower:
bower install https://npmcdn.com/react-selectize@0.7.4/bower.zip1998 script tag:
<html><head><scriptsrc="http://www.preludels.com/prelude-browser-min.js" type="text/javascript" ></script><scriptsrc="https://npmcdn.com/prelude-extension@0.0.11/dist/index.min.js" type="text/javascript" ></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.min.js" type="text/javascript" ></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js" type="text/javascript" ></script><!-- optional dependency (only required with using the tether prop) --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" type="text/javascript" ></script><!-- REACT SELECTIZE --><scriptsrc="https://npmcdn.com/react-selectize@0.7.4/dist/index.min.js" type="text/javascript" ></script><!-- THEMES (default, bootstrap3, material) --><linkrel="stylesheet" href="https://npmcdn.com/react-selectize@0.7.4/dist/index.min.css"/></head></html>React=require("react");ReactSelectize=require("react-selectize");SimpleSelect=ReactSelectize.SimpleSelect;MultiSelect=ReactSelectize.MultiSelect;...<SimpleSelectplaceholder="Select a fruit"onValueChange={function(value){alert(value);}}><optionvalue="apple">apple</option><optionvalue="mango">mango</option><optionvalue="orange">orange</option><optionvalue="banana">banana</option></SimpleSelect>...// Note: options can be passed as props as well, for example<MultiSelectplaceholder="Select fruits"options=["apple","mango","orange","banana"].map(function(fruit){return{label: fruit,value: fruit};});onValuesChange={function(values){alert(values);}}/>{create-factory}:React = require \react
{SimpleSelect, MultiSelect, ReactSelectize} = require \react-selectizeSimpleSelect = create-factorySimpleSelectMultiSelect = create-factoryMultiSelect
.
.
.
SimpleSelectdoplaceholder: 'Select a fruit'options: <[applemangoorangebanana]> |> map ~> label: it, value: iton-value-change: (value) ~>
alertvalue
.
.
.
MultiSelectdoplaceholder: 'Select fruits'options: <[applemangoorangebanana]> |> map ~> label: it, value: iton-values-change: (values) ~>
alertvaluesthe default structure of an option object is
{label: String, value :: a}whereaimplies thatvalueproperty can be of any equatable typeSimpleSelect notifies change via
onValueChangeprop whereas MultiSelect notifies change viaonValuesChangepropthe onValueChange callback for SimpleSelect is passed 1 parameter. the
selected option object(instead of the value property of the option object)the onValuesChange callback for MultiSelect is passed 1 parameter an Array of selected option objects (instead of a collection of the value properties or a comma separated string of value properties)
both the SimpleSelect & MultiSelect will manage the
open,search,value&anchorprops using internal state, if they are not provided via props: when passingopen,search,valueoranchorvia props, you must update them on*Change (just like in the case of standard react html input components)
value={state.selectedValue}onValueChange={function(value){self.setState({selectedValue: value});}}search={state.search}onSearchChange={function(value){self.setState({search: value});}}- when using custom option object, you should implement the
uidfunction which accepts an option object and returns a unique id, for example:
// assuming the type of our option object is:// {firstName :: String, lastName :: String, age :: Int}uid={function(item){returnitem.firstName+item.lastName;}}the uid function is used internally for performance optimization.
- react
- react-dom
- react-addons-css-transition
- react-addons-shallow-compare
npm installgulp- visit
localhost:8000 npm test,npm run coveragefor unit tests & coverage- for production build/test run
MINIFY=true gulp