JarCastingReact-chosen
This project has been deprecated. Please use React-select, a pure React-based solution, instead. Thanks!
React wrapper for Chosen jQuery.
install
bower install react-chosen
Or simply drop the script somewhere on your page (after React and Chosen of course):
<script src="path/to/react-chosen.js"></script>
The npm build works, but unfortunately not well:
npm install react-chosen
Due to the awkwardness of Chosen and jQuery on npm, you'll still have to include jQuery as a global dependency. Installing via npm is not recommended.
API
Please refer to Chosen's API. It's pretty much the same, except:
-
Every Chosen option employs camelCase, e.g. disable_search_threshold -> disableSearchThreshold.
-
Just like React's controlled component,
valuecontrols your select and makes it immune to changes unless you specify so.
Example
/** @jsx React.DOM */
React.renderComponent(
<Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
<option value="Facebook">Facebook</option>
<option value="Harvest">Harvest</option>
</Chosen>
, document.body);
// or multi-select
React.renderComponent(
<Chosen defaultValue={["Apple"]} width="92px" data-placeholder="Select..." multiple>
<option value="Apple">Apple</option>
<option value="Facebook">Facebook</option>
<option value="Harvest">Harvest</option>
</Chosen>
, document.body);
License
MIT.