{"id":13437101,"url":"https://github.com/furqanZafar/react-selectize","last_synced_at":"2025-03-19T06:30:39.039Z","repository":{"id":27999519,"uuid":"31493759","full_name":"furqanZafar/react-selectize","owner":"furqanZafar","description":null,"archived":false,"fork":false,"pushed_at":"2021-01-05T20:58:20.000Z","size":3024,"stargazers_count":704,"open_issues_count":122,"forks_count":139,"subscribers_count":19,"default_branch":"master","last_synced_at":"2024-05-17T08:02:55.505Z","etag":null,"topics":["multiselect","react","simpleselect"],"latest_commit_sha":null,"homepage":"http://furqanzafar.github.io/react-selectize/","language":"LiveScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/furqanZafar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-01T10:51:12.000Z","updated_at":"2024-05-17T08:02:55.506Z","dependencies_parsed_at":"2022-08-03T05:30:16.680Z","dependency_job_id":null,"html_url":"https://github.com/furqanZafar/react-selectize","commit_stats":null,"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/furqanZafar%2Freact-selectize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/furqanZafar%2Freact-selectize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/furqanZafar%2Freact-selectize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/furqanZafar%2Freact-selectize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/furqanZafar","download_url":"https://codeload.github.com/furqanZafar/react-selectize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244075615,"owners_count":20393979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["multiselect","react","simpleselect"],"created_at":"2024-07-31T03:00:54.329Z","updated_at":"2025-03-19T06:30:39.033Z","avatar_url":"https://github.com/furqanZafar.png","language":"LiveScript","funding_links":[],"categories":["Uncategorized","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Uncategorized","Form Components"],"readme":"[![npm version](https://badge.fury.io/js/react-selectize.svg)](https://badge.fury.io/js/react-selectize)\n[![Build Status](https://travis-ci.org/furqanZafar/react-selectize.svg?branch=develop)](https://travis-ci.org/furqanZafar/react-selectize)\n[![Coverage Status](https://coveralls.io/repos/furqanZafar/react-selectize/badge.svg?branch=develop\u0026service=github)](https://coveralls.io/github/furqanZafar/react-selectize?branch=develop)\n\n# React Selectize\n`ReactSelectize` is a stateless Select component for ReactJS, that provides a platform for the more developer friendly `SimpleSelect` \u0026 `MultiSelect` components. \n\nBoth `SimpleSelect` \u0026 `MultiSelect` have been designed to work as drop in replacement for the built-in `React.DOM.Select` component.\n\nstyles \u0026 features inspired by [React Select](http://jedwatson.github.io/react-select/) \u0026 [Selectize](http://brianreavis.github.io/selectize.js/).\n\n**DEMO / Examples**: [furqanZafar.github.io/react-selectize](http://furqanZafar.github.io/react-selectize/)\n\n[![](http://i.imgsafe.co/rQmogzn.gif)](http://furqanZafar.github.io/react-selectize/)\n\n- [Changelog](CHANGELOG.md) (last updated on 29th July 2017)\n- [API Reference](API.md)\n\n\n# Motivation\n* existing components do not behave like built-in React.DOM.* components. \n* existing components [synchronize props with state](http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html) an anti pattern, which makes them prone to bugs \u0026 difficult for contributers to push new features without breaking something else.\n* more features.\n\n## Features\n* [Drop in replacement for React.DOM.Select](http://furqanzafar.github.io/react-selectize/#/?category=simple\u0026example=drop-in-replacement-for-react.dom.select)\n* [Customizable themes](http://furqanzafar.github.io/react-selectize/#/?category=simple\u0026example=themes)\n* Stateless, therefore extremely flexible \u0026 extensible\n* Clean and compact API fully documented on GitHub\n* [Multiselect support](http://furqanzafar.github.io/react-selectize/#/?category=multi\u0026example=multi-select)\n* [Option groups](http://furqanzafar.github.io/react-selectize/#/?category=multi\u0026example=option-groups)\n* [Custom filtering \u0026amp; option object](http://furqanzafar.github.io/react-selectize/#/?category=multi\u0026example=custom-filtering-and-rendering)\n* [Search highlighting](http://furqanzafar.github.io/react-selectize/#/?category=simple\u0026example=search-highlighting)\n* [Custom option \u0026amp; value rendering](http://furqanzafar.github.io/react-selectize/#/?category=simple\u0026example=custom-option-and-value-rendering)\n* [Animated dropdown](http://furqanzafar.github.io/react-selectize/#/?category=multi\u0026example=animated-dropdown)\n* [Remote data loading](http://furqanzafar.github.io/react-selectize/#/?category=simple\u0026example=remote-options)\n* [Tagging or item creation](http://furqanzafar.github.io/react-selectize/#/?category=multi\u0026example=tags)\n* [Restore on backspace](http://furqanzafar.github.io/react-selectize/#/?category=simple\u0026example=restore-on-backspace)\n* [Editable value](http://furqanzafar.github.io/react-selectize/#/?category=simple\u0026example=editable-value)\n* [Caret between items](http://furqanzafar.github.io/react-selectize/#/?category=multi\u0026example=tags)\n* [Customizable dropdown direction](http://furqanzafar.github.io/react-selectize/#/?category=multi\u0026example=dropdown-direction)\n* [Mark options as unselectable](http://furqanzafar.github.io/react-selectize/#/?category=simple\u0026example=selectability)\n* [Disable selected values](http://furqanzafar.github.io/react-selectize/#/?category=multi\u0026example=disable-selected)\n* [Absolute positioned overlay, \"Tether\"ed to the search field](http://furqanzafar.github.io/react-selectize/#/?category=multi\u0026example=tether)\n\n## Deps\n* [tether](https://github.com/HubSpot/tether)\n\n## Peer Deps\n* create-react-class\n* react\n* react-dom\n* react-transition-group\n* react-dom-factories\n\n## Install\n\n* **npm:**\n`npm install react-selectize`\n\nyour package.json must look like this\n```\n{\n    \"dependencies\": {\n        \"react\": \"^16.0.0-beta.2\",\n        \"react-addons-css-transition-group\": \"^15.6.0\",\n        \"react-addons-shallow-compare\": \"^15.6.0\",\n        \"react-dom\": \"^16.0.0-beta.2\",\n        \"react-dom-factories\": \"^1.0.0\",\n        \"react-selectize\": \"^3.0.1\",\n        \"react-transition-group\": \"^1.1.2\"\n    }\n}\n```\n\nto include the default styles add the following import statement to your stylus file:\n`@import 'node_modules/react-selectize/themes/index.css'`\n\n* **bower:**\n`bower install https://unpkg.com/react-selectize@3.0.1/bower.zip`\n\n* **1998 script tag:**\n```html\n\u003chtml\u003e\n \u003chead\u003e\n  \u003c!-- PRELUDE --\u003e\n  \u003cscript src=\"http://www.preludels.com/prelude-browser-min.js\" type=\"text/javascript\" \u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/prelude-extension@0.0.11/dist/index.min.js\" type=\"text/javascript\" \u003e\u003c/script\u003e\n\n  \u003c!-- REACT --\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/react-dom-factories@1.0.0\"\u003e\u003c/script\u003e\n\n  \u003c!-- optional dependency (only required with using the tether prop) --\u003e\n  \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js\" type=\"text/javascript\" \u003e\u003c/script\u003e\n\n  \u003c!-- REACT SELECTIZE --\u003e\n  \u003cscript src=\"https://unpkg.com/react-selectize@3.0.1/dist/index.min.js\" type=\"text/javascript\" \u003e\u003c/script\u003e\n\n  \u003c!-- THEMES (default, bootstrap3, material) --\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/react-selectize@3.0.1/dist/index.min.css\"/\u003e\n  \n \u003c/head\u003e\n \u003cbody\u003e\n  \u003cdiv id=\"mount-node\"\u003e\u003c/div\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n   ReactDOM.render(\n    React.createElement(reactSelectize.SimpleSelect, {\n     style: {width: 300},\n     tether: true,\n     placeholder: \"Select fruit\", \n     options: [{label: \"apple\", value: \"apple\"}, {label: \"banana\", value: \"banana\"}]\n    }), \n    document.getElementById(\"mount-node\")\n   );\n  \u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Usage (jsx)\n```jsx\nimport React, {Component} from 'react';\nimport {ReactSelectize, SimpleSelect, MultiSelect} from 'react-selectize';\n.\n.\n.\n\u003cSimpleSelect placeholder=\"Select a fruit\" onValueChange={value =\u003e alert(value)}\u003e\n  \u003coption value = \"apple\"\u003eapple\u003c/option\u003e\n  \u003coption value = \"mango\"\u003emango\u003c/option\u003e\n  \u003coption value = \"orange\"\u003eorange\u003c/option\u003e\n  \u003coption value = \"banana\"\u003ebanana\u003c/option\u003e\n\u003c/SimpleSelect\u003e\n.\n.\n.\n// Note: options can be passed as props as well, for example\n\u003cMultiSelect\n    placeholder = \"Select fruits\"\n    options = {[\"apple\", \"mango\", \"orange\", \"banana\"].map(\n      fruit =\u003e ({label: fruit, value: fruit})\n    )}\n    onValuesChange = {value =\u003e alert(value)}\n/\u003e\n```\n\n## Usage (livescript)\n```LiveScript\n{create-factory}:React = require \\react\n{SimpleSelect, MultiSelect, ReactSelectize} = require \\react-selectize\nSimpleSelect = create-factory SimpleSelect\nMultiSelect = create-factory MultiSelect\n.\n.\n.\nSimpleSelect do     \n    placeholder: 'Select a fruit'\n    options: \u003c[apple mango orange banana]\u003e |\u003e map ~\u003e label: it, value: it\n    on-value-change: (value) ~\u003e\n        alert value\n.\n.\n.\nMultiSelect do\n    placeholder: 'Select fruits'\n    options: \u003c[apple mango orange banana]\u003e |\u003e map ~\u003e label: it, value: it\n    on-values-change: (values) ~\u003e\n        alert values\n```\n\n## Gotchas\n* the default structure of an option object is `{label: String, value :: a}` where `a` implies that `value` property can be of any equatable type\n\n* SimpleSelect notifies change via `onValueChange` prop whereas MultiSelect notifies change via `onValuesChange` prop\n\n* the onValueChange callback for SimpleSelect is passed 1 parameter. the `selected option object` (instead of the value property of the option object)\n\n* 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)\n\n* both the SimpleSelect \u0026 MultiSelect will manage the `open`, `search`, `value` \u0026 `anchor` props using internal state, if they are not provided via props:\nwhen passing `open`, `search`, `value` or `anchor` via props, you must update them on*Change (just like in the case of standard react html input components)\n``` jsx\nvalue = {state.selectedValue}\nonValueChange = {function(value){\n    self.setState({selectedValue: value});\n}}\nsearch = {state.search}\nonSearchChange = {function(value){    \n    self.setState({search: value});\n}}\n```\n\n* when using custom option object, you should implement the `uid` function which accepts an option object and returns a unique id, for example:\n``` jsx\n// assuming the type of our option object is:\n// {firstName :: String, lastName :: String, age :: Int}\nuid = {function(item){\n    return item.firstName + item.lastName;    \n}}\n```\nthe `uid` function is used internally for performance optimization. \n\n## Development\n* `npm install`\n* `npm start`\n* visit `localhost:8000`\n* `npm test` , `npm run coverage` for unit tests \u0026 coverage\n* for production build/test run `MINIFY=true gulp`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FfurqanZafar%2Freact-selectize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FfurqanZafar%2Freact-selectize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FfurqanZafar%2Freact-selectize/lists"}