react-select-search - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

index.js

@@ -41,6 +41,14 @@ /**
 				name: null,
+				fuse: {
+					keys: ['name'],
+					threshold: 0.3
+				},
 				valueChanged: function () {},
 				optionSelected: function () {},
+				onMount: function () {},
 				onBlur: function () {},
-				onFocus: function () {}
+				onFocus: function () {},
+				renderOption: function (option) {
+					return option.name;
+				}
 			};
@@ -59,2 +67,6 @@ },
 		
+		componentDidMount: function () {
+			this.props.onMount.call(this);
+		},
+		
 		componentDidUpdate: function (prevProps, prevState) {
@@ -68,3 +80,3 @@ if (this.state.value !== prevState.value) {
 			if (options && options.length > 0 && value && value.length > 0) {
-				var fuse         = new Fuse(options, {keys: ['name']}),
+				var fuse         = new Fuse(options, this.props.fuse),
 			        foundOptions = fuse.search(value);
@@ -133,3 +145,3 @@
 			
-			this.props.onFocus();
+			this.props.onFocus.call(this);
 		},
@@ -148,2 +160,4 @@
 			}
+			
+			this.props.onBlur.call(this);
 
@@ -157,3 +171,2 @@ if (this.refs.hasOwnProperty('select')) {
 					this.setState({options: []});
-					this.props.onBlur();
 				}.bind(this), 200);
@@ -286,3 +299,3 @@ }
 
-			this.props.valueChanged(option, this.state, this.props);
+			this.props.valueChanged.call(this, option, this.state, this.props);
 
@@ -320,3 +333,3 @@ this.setState({value: option.value, search: option.name, options: this.props.options});
 					if (option) {
-						options.push(<li className={_classes.option + ' ' + this.m('selected', _classes.option)} onClick={this.chooseOption.bind(this, option.value)} key={option.value + '-option'} data-value={option.value}>{option.name}</li>);
+						options.push(<li className={_classes.option + ' ' + this.m('selected', _classes.option)} onClick={this.chooseOption.bind(this, option.value)} key={option.value + '-option'} data-value={option.value} dangerouslySetInnerHTML={{__html: this.props.renderOption(option)}} />);
 					}
@@ -327,3 +340,3 @@ }
 					if (element.value !== this.state.value) {
-						options.push(<li className={_classes.option} onClick={this.chooseOption.bind(this, element.value)} key={element.value + '-option'} data-value={element.value}>{element.name}</li>);
+						options.push(<li className={_classes.option} onClick={this.chooseOption.bind(this, element.value)} key={element.value + '-option'} data-value={element.value} dangerouslySetInnerHTML={{__html: this.props.renderOption(element)}} />);
 					}
@@ -330,0 +343,0 @@ }.bind(this));

package.json

 {
   "name": "react-select-search",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React powered selectbox with filter",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -11,6 +11,8 @@ # React Select Search (WIP)
 
-Live demo can be found here: http://tbleckert.github.io/react-select-search/
+Live demo can be found here: [http://tbleckert.github.io/react-select-search/](http://tbleckert.github.io/react-select-search/)
 
 ## How to use
 
+Install it with npm (`npm install react-select-search --save`) and require it like you normally would.
+
     React.render(
@@ -23,4 +25,7 @@ <SelectSearch
 	        options={objectWithOptions}
+	        fuse={fuseJsOptions}
 	        optionSelected={callbackWhenOptionMarked}
 	        valueChanged={callbackWhenValueChanged}
+	        renderOption={modifyOptionHtml}
+	        onMount={componentDidMountCallback}
 	        onFocus={searchFocusCallback}
@@ -27,0 +32,0 @@ onBlur={searchBlurCallback} />,

No alert changes

Improved metrics

Total package byte prevSize

1737618

increased by0.11%

Lines of code

21609

increased by0.13%

Number of lines in readme file

35

increased by16.67%

No dependency changes