init

Author: samanmohamadi

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions", "> 1%"]
+        }
+      }
+    ]
+  ],
+  "plugins": [["transform-object-rest-spread"]]
+}

.gitignore

@@ -0,0 +1,8 @@
+.idea
+.vscode
+examples/bundle.js
+node_modules
+npm-debug.js
+lib
+.git
+.DS_store

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "always"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Bhaskar Gyan Vardhan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,36 @@
+# useDebouncedEffect react hook
+
+Install it with yarn:
+
+```
+yarn add use-throttled-effect --save
+```
+
+Or with npm:
+
+```
+npm i use-throttled-effect --save
+```
+
+#Example
+```javascript
+import React, { useState } from 'react';
+import useThrottledEffect  from 'use-throttled-effect';
+
+export default function Input() {
+  const [count, setCount] = useState(0);
+
+  useEffect(()=>{
+    const interval = setInterval(() => setCount(count=>count+1) ,100);
+    return ()=>clearInterval(interval);
+  },[])
+  
+  useThrottledEffect(()=>{
+    console.log(count);     
+  }, 1000 ,[count]);
+  
+  return (
+    {count}
+  );
+}
+```

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "use-debounced-effect",
+  "version": "0.0.1",
+  "description": "Debounced effect hook for react",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "babel ./src --out-dir ./lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:samanmohamadi/use-debounced-effect.git"
+  },
+  "keywords": [
+    "debounce",
+    "use-effect",
+    "react-hook",
+    "react"
+  ],
+  "author": "Saman Mohamadi ([email protected])",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/samanmohamadi/use-debounced-effect/issues"
+  },
+  "peerDependencies": {},
+  "homepage": "https://github.com/samanmohamadi/use-debounced-effect#readme",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.7.0"
+  }
+}

src/index.js

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+
+export function useDebouncedEffect(callback, delay,deps=[]) {
+
+  useEffect(
+    () => {
+      const handler = setTimeout(() => {
+        callback()
+      }, delay);
+
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [callback,delay,...deps]
+  );
+}
+
+export default useDebouncedEffect;