Merge pull request #7 from WebDevStudios/feature/debounce-input-field

Added debounce to input

Author: coreymcollins

assets/js/components/searchForm.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import qs from 'query-string';
+import { DebounceInput } from 'react-debounce-input';
 import SearchResults from './searchResults';
 
 export default class SearchForm extends React.Component {
@@ -98,7 +99,7 @@ export default class SearchForm extends React.Component {
 	render() {
 		return (
 			<div className={ `${ this.getFormClass() }` }>
-				<input className="search-input" type="text" onChange={ this.getResults } placeholder={ wds_react_post_search.placeholder_text } />
+				<DebounceInput debounceTimeout={ 300 } className="search-input" type="text" onChange={ this.getResults } placeholder={ wds_react_post_search.placeholder_text } />
 				<SearchResults searched={ this.state.searched } loading={ this.state.loading } results={ this.state.results } lengthError={ this.state.lengthError } empty={ this.state.empty } />
 			</div>
 		)

assets/js/public.min.js

@@ -3,7 +3,7 @@
  * Plugin Name: WDS React Post Search
  * Description: Power up the basic WordPress search with React.
  * Plugin URI: https://www.webdevstudios.com
- * Version: 1.0.3
+ * Version: 1.0.4
  *
  * With help from:
  * https://www.ibenic.com/wordpress-react-search/

class-wds-react-post-search.php

@@ -1,6 +1,6 @@
 {
     "name": "wds-react-post-search",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "Power up the basic WordPress search field with React.",
     "main": "assets/js/public.js",
     "dependencies": {
@@ -12,7 +12,8 @@
         "install": "^0.12.2",
         "npm": "^6.4.1",
         "query-string": "^6.2.0",
-        "react": "^16.5.2",
+        "react": "^16.6.3",
+        "react-debounce-input": "^3.2.0",
         "react-dom": "^16.5.2",
         "webpack": "^4.21.0"
     },