-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #96 from heyjul3s/feat/useDebounce
Feat/use debounce
- Loading branch information
Showing
6 changed files
with
191 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| # `@artifak/usedebouncefn` | ||
|
|
||
| A react hook to debounce functions/callbacks. | ||
|
|
||
| ## Installation | ||
|
|
||
| ### Yarn | ||
|
|
||
| ```sh | ||
| yarn add @artifak/usedebouncefn | ||
| ``` | ||
|
|
||
| ### NPM | ||
|
|
||
| ```sh | ||
| npm install @artifak/usedebouncefn | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```ts | ||
| import React from 'react'; | ||
| import { useDebouncedFn } from 'artifak'; | ||
|
|
||
| export function Debounce() { | ||
| const [searchString, setSearchString] = React.useState(''); | ||
| const [dropDownOptions, setDropdownOptions] = React.useState([]); | ||
|
|
||
| const getDropDown = async val => { | ||
| await fetch('http://jsonplaceholder.typicode.com/posts') | ||
| .then(res => { | ||
| if (res.ok) { | ||
| return res.json(); | ||
| } | ||
|
|
||
| throw res; | ||
| }) | ||
| .then(res => { | ||
| const data = res.filter(datum => { | ||
| return datum.title.includes(val); | ||
| }); | ||
|
|
||
| setDropdownOptions(data); | ||
| }) | ||
| .catch(res => { | ||
| console.error(res); | ||
| }); | ||
| }; | ||
|
|
||
| const debounceDropDown = useDebouncedFn( | ||
| nextValue => getDropDown(nextValue), | ||
| 1000 | ||
| ); | ||
|
|
||
| const onInputChangeHandler = ev => { | ||
| const nextValue = ev.target.value; | ||
| setSearchString(nextValue); | ||
| debounceDropDown(nextValue); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <input | ||
| className="input" | ||
| placeholder="Type Something..." | ||
| onChange={onInputChangeHandler} | ||
| value={searchString} | ||
| /> | ||
|
|
||
| {dropDownOptions.length && ( | ||
| <div className="options"> | ||
| {dropDownOptions.map(dropDownOption => ( | ||
| <div key={dropDownOption.id}>{dropDownOption.title}</div> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { renderHook } from '@testing-library/react-hooks'; | ||
| import { useDebouncedFn } from '../src'; | ||
|
|
||
| describe('@artifak/usedebouncefn', () => { | ||
| test('should match media query', () => { | ||
| const testFn = () => console.log('Hello World'); | ||
| const { result } = renderHook(() => useDebouncedFn(testFn, 300)); | ||
| expect(result.current).toBeDefined(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| { | ||
| "name": "@artifak/usedebouncedfn", | ||
| "version": "1.0.0", | ||
| "description": "A React hook to debounce functions or callbacks.", | ||
| "keywords": [ | ||
| "react", | ||
| "debounce", | ||
| "hooks" | ||
| ], | ||
| "author": "Julian Low", | ||
| "license": "MIT", | ||
| "sideEffects": false, | ||
| "main": "dist/usedebouncedfn.cjs.js", | ||
| "module": "dist/usedebouncedfn.esm.js", | ||
| "src": "src/index.ts", | ||
| "types": "dist/src/index.d.ts", | ||
| "directories": { | ||
| "src": "src", | ||
| "test": "__tests__" | ||
| }, | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/heyjul3s/artifak.git" | ||
| }, | ||
| "scripts": { | ||
| "build": "rimraf dist && builder", | ||
| "test": "echo \"Error: run tests from root\" && exit 1" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/heyjul3s/artifak/issues" | ||
| }, | ||
| "homepage": "https://github.com/heyjul3s/artifak#readme", | ||
| "devDependencies": { | ||
| "@artifak/bundler": "^1.1.4", | ||
| "@types/lodash.debounce": "^4.0.6" | ||
| }, | ||
| "dependencies": { | ||
| "lodash.debounce": "^4.0.8", | ||
| "react-async-hook": "^3.6.2", | ||
| "use-constant": "^1.1.0" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { useRef, useCallback, useEffect } from 'react'; | ||
| import debounce from 'lodash.debounce'; | ||
|
|
||
| export function useDebouncedFn< | ||
| Fn extends (...args: any[]) => any, | ||
| Delay extends number | ||
| >(callback: Fn, delay: Delay) { | ||
| const memoizedCallback = useCallback<Fn>(callback, []); | ||
| const debouncedFn = useRef(debounce(memoizedCallback, delay)); | ||
|
|
||
| useEffect(() => { | ||
| debouncedFn.current = debounce(memoizedCallback, delay); | ||
|
|
||
| return function unmountUseDebounce() { | ||
| debouncedFn.current.cancel(); | ||
| }; | ||
| }, [debouncedFn, delay]); | ||
|
|
||
| return debouncedFn.current; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "extends": "../../tsconfig.json", | ||
| "compilerOptions": { | ||
| "outDir": "dist", | ||
| "rootDir": "." | ||
| }, | ||
| "references": [], | ||
| "include": ["src"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters