@benbria/react-selectize
Advanced tools
A Stateless & Flexible Select component for React inspired by Selectize
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
npm install react-selectizeyour 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.zip
1998 script tag:
<html>
<head>
<!-- PRELUDE -->
<script src="http://www.preludels.com/prelude-browser-min.js" type="text/javascript" ></script>
<script src="https://unpkg.com/prelude-extension@0.0.11/dist/index.min.js" type="text/javascript" ></script>
<!-- REACT -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom-factories@1.0.0"></script>
<!-- optional dependency (only required with using the tether prop) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" type="text/javascript" ></script>
<!-- REACT SELECTIZE -->
<script src="https://unpkg.com/react-selectize@3.0.1/dist/index.min.js" type="text/javascript" ></script>
<!-- THEMES (default, bootstrap3, material) -->
<link rel="stylesheet" href="https://unpkg.com/react-selectize@3.0.1/dist/index.min.css"/>
</head>
<body>
<div id="mount-node"></div>
<script type="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>
import React, {Component} from 'react';
import {ReactSelectize, SimpleSelect, MultiSelect} from 'react-selectize';
.
.
.
<SimpleSelect placeholder="Select a fruit" onValueChange={value => alert(value)}>
<option value = "apple">apple</option>
<option value = "mango">mango</option>
<option value = "orange">orange</option>
<option value = "banana">banana</option>
</SimpleSelect>
.
.
.
// Note: options can be passed as props as well, for example
<MultiSelect
placeholder = "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-selectize
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) ~>
alert value
.
.
.
MultiSelect do
placeholder: 'Select fruits'
options: <[apple mango orange banana]> |> map ~> label: it, value: it
on-values-change: (values) ~>
alert values
the default structure of an option object is {label: String, value :: a} where a implies that value property can be of any equatable type
SimpleSelect notifies change via onValueChange prop whereas MultiSelect notifies change via onValuesChange prop
the 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 & anchor props using internal state, if they are not provided via props:
when 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)
value = {state.selectedValue}
onValueChange = {function(value){
self.setState({selectedValue: value});
}}
search = {state.search}
onSearchChange = {function(value){
self.setState({search: value});
}}
uid function 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){
return item.firstName + item.lastName;
}}
the uid function is used internally for performance optimization.
npm installnpm startlocalhost:8000npm test , npm run coverage for unit tests & coverageMINIFY=true gulpFAQs
A Stateless & Flexible Select component for React inspired by Selectize
The npm package @benbria/react-selectize receives a total of 41 weekly downloads. As such, @benbria/react-selectize popularity was classified as not popular.
We found that @benbria/react-selectize demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.