- Notifications
You must be signed in to change notification settings - Fork0
A fork of React Selectize but with modifications for beforeBlur hook
License
glints-dev/react-selectize
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
ReactSelectize is a stateless Select component for ReactJS, that provides a platform for the more developer friendlySimpleSelect &MultiSelect components.
BothSimpleSelect &MultiSelect have been designed to work as drop in replacement for the built-inReact.DOM.Select component.
styles & features inspired byReact Select &Selectize.
DEMO / Examples:furqanZafar.github.io/react-selectize
- Changelog (last updated on 29th July 2017)
- API Reference
- existing components do not behave like built-in React.DOM.* components.
- existing componentssynchronize 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
- create-react-class
- react
- react-dom
- react-transition-group
- react-dom-factories
- npm:
npm install react-selectize
your package.json must look like this
{ "dependencies": { "react": "^16.0.0-beta.2", "react-addons-css-transition-group": "^15.6.0", "react-addons-shallow-compare": "^15.6.0", "react-dom": "^16.0.0-beta.2", "react-dom-factories": "^1.0.0", "react-selectize": "^3.0.1", "react-transition-group": "^1.1.2" }}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://unpkg.com/react-selectize@3.0.1/bower.zip1998 script tag:
<html><head><!-- PRELUDE --><scriptsrc="http://www.preludels.com/prelude-browser-min.js"type="text/javascript"></script><scriptsrc="https://unpkg.com/prelude-extension@0.0.11/dist/index.min.js"type="text/javascript"></script><!-- REACT --><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.min.js"></script><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script><scripttype="text/javascript"src="https://unpkg.com/react-dom-factories@1.0.0"></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://unpkg.com/react-selectize@3.0.1/dist/index.min.js"type="text/javascript"></script><!-- THEMES (default, bootstrap3, material) --><linkrel="stylesheet"href="https://unpkg.com/react-selectize@3.0.1/dist/index.min.css"/></head><body><divid="mount-node"></div><scripttype="text/javascript">ReactDOM.render(React.createElement(reactSelectize.SimpleSelect,{style:{width:300},tether:true,placeholder:"Select fruit",options:[{label:"apple",value:"apple"},{label:"banana",value:"banana"}]}),document.getElementById("mount-node"));</script></body></html>
importReact,{Component}from'react';import{ReactSelectize,SimpleSelect,MultiSelect}from'react-selectize';...<SimpleSelectplaceholder="Select a fruit"onValueChange={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(fruit=>({label:fruit,value:fruit}))}onValuesChange={value=>alert(value)}/>
{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;}}
theuid function is used internally for performance optimization.
npm installnpm start- visit
localhost:8000 npm test,npm run coveragefor unit tests & coverage- for production build/test run
MINIFY=true gulp
About
A fork of React Selectize but with modifications for beforeBlur hook
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Languages
- LiveScript74.1%
- JavaScript16.5%
- CSS6.8%
- HTML2.6%