Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-selectize

Package Overview
Dependencies
Maintainers
1
Versions
61
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-selectize

A Stateless & Flexible Select component for React inspired by Selectize

  • 0.8.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8.6K
decreased by-26.01%
Maintainers
1
Weekly downloads
 
Created
Source

npm version Build Status Coverage Status

React 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

Motivation

  • 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.

Features

Install

  • 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.8.1/bower.zip

  • 1998 script tag:

<html>
 <head>
  <script src="http://www.preludels.com/prelude-browser-min.js" type="text/javascript" ></script>
  <script src="https://npmcdn.com/prelude-extension@0.0.11/dist/index.min.js" type="text/javascript" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.min.js" type="text/javascript" ></script>
  <script src="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) -->
  <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://npmcdn.com/react-selectize@0.8.1/dist/index.min.js" type="text/javascript" ></script>

  <!-- THEMES (default, bootstrap3, material) -->
  <link rel="stylesheet" href="https://npmcdn.com/react-selectize@0.8.1/dist/index.min.css"/>
  
 </head>
</html>

Usage (jsx)

React = require("react");
ReactSelectize = require("react-selectize");
SimpleSelect = ReactSelectize.SimpleSelect;
MultiSelect = ReactSelectize.MultiSelect;
.
.
.
<SimpleSelect
    placeholder = "Select a fruit"
    onValueChange = {function(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(function(fruit){
        return {label: fruit, value: fruit};
    });
    onValuesChange = {function(values){
        alert(values);
    }}
/>

Usage (livescript)

{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

Gotchas

  • 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});
}}
  • when using custom option object, you should implement the 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.

Deps

Peer Deps

  • react
  • react-dom
  • react-addons-css-transition
  • react-addons-shallow-compare

Development

  • npm install
  • gulp
  • visit localhost:8000
  • npm test , npm run coverage for unit tests & coverage
  • for production build/test run MINIFY=true gulp

Keywords

FAQs

Package last updated on 19 Feb 2016

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc