npmpackage.info

use-lodash-debounce

Custom react hooks for lodash debounce.

1.3.0

MIT

TypeScript

362.00 B

1,018,052 2.5

Installations

npm install use-lodash-debounce

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=8

Node Version

14.16.0

NPM Version

6.14.11 Score

74.4

Supply Chain

92.2

Quality

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

5

Total

24

Closed

2

Merged

17

Issues

Open

2

Total

6

Closed

4

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 4 Contributors

Languages

TypeScript

JavaScript

TypeScript (77.41%)

JavaScript (22.59%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

gnbaron

Download Statistics

Total Downloads

1,018,052

Last Day

519

Last Week

3,096

Last Month

13,732

Last Year

133,024

GitHub Statistics

MIT License

55 Stars

42 Commits

6 Forks

1 Watchers

6 Branches

4 Contributors

Updated on Dec 16, 2024

Bundle Size

701.00 B

Minified

362.00 B

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

1.3.0

Package Id

use-lodash-debounce@1.3.0

Unpacked Size

11.13 kB

Size

3.63 kB

File Count

NPM Version

6.14.11

Node Version

14.16.0

Total Downloads

Cumulative downloads

Total Downloads

1,018,052

Last Day

3.6%

519

Compared to previous day

Last Week

2.2%

3,096

Compared to previous week

Last Month

69%

13,732

Compared to previous month

Last Year

-38.8%

133,024

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

use-lodash-debounce ⏳

Custom react hooks for lodash debounce that provides an easy way to debounce any value, debounced callbacks and types out of the box.

Install

Using yarn or npm:

1yarn add use-lodash-debounce

1npm i use-lodash-debounce

⚠️ react@16.8.0 or greater is required due to the usage of hooks.

Notice that react and lodash.debounce are defined as peer dependencies in order to get a smaller bundle size. This means they should be installed in your project.

Usage

Debounce values throughout re-renders with useDebounce. The debounce will be triggered everytime the value changes (compared using strict equality).

1import { useDebounce } from 'use-lodash-debounce'
2
3const [value, setValue] = useState()
4const debouncedValue = useDebounce(value, 800)

Create debounced callbacks with useDebouncedCallback.

1import { useDebouncedCallback } from 'use-lodash-debounce'
2
3const [value, setValue] = useState()
4const debouncedSetValue = useDebouncedCallback(setValue, 800)

Example

1import { useDebounce } from 'use-lodash-debounce'
2
3function SearchInput() {
4  const [value, setValue] = useState();
5  const debouncedValue = useDebounce(value, 1000);
6
7  useEffect(() => {
8    // do search stuff
9  }, [debouncedValue]);
10
11  return (
12    <input
13      placeholder="Type to search"
14      onChange={e => setValue(e.target.value)}
15    />
16  );
17}

Debounce Options

Lodash debounce supports a set of additional options which can be provided through a third parameter for useDebounce and useDebouncedCallback.

1const options = { leading: true, maxWait: 1600, trailing: false }
2const debouncedSetValue = useDebouncedCallback(setValue, 800, options)

See lodash debounce docs for details.

Cancel / Flush

The callback returned by useDebouncedCallback has a method cancel to cancel delayed function invocations and a flush method to immediately invoke them.

Alternatives

If you're looking for a debounce hook that don't use lodash internally, check out use-debounce.

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.5

/10

Last Scanned on 2025-02-03

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to use-lodash-debounce

use-lodash-debounce-throttle

0.3.5

Bring debounce & throttle of lodash version to react-hooks

khoros-use-lodash-debounce-throttle

0.3.5

Bring debounce & throttle of lodash version to react-hooks

re-use-debounce

0.0.1

Reuse lodash debounce as React hook

Gathering detailed insights and metrics for use-lodash-debounce

use-lodash-debounce

Installations

Developer Guide

No

CommonJS

>=8

14.16.0

6.14.11

Score

Pull Requests

5

24

2

17

Issues

2

6

4

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

gnbaron

Download Statistics

GitHub Statistics

Bundle Size

701.00 B

362.00 B

Maintainers

Package Meta Information

Total Downloads

1,018,052

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

use-lodash-debounce ⏳

Install

Usage

Example

Debounce Options

Cancel / Flush

Alternatives

License

10

10

6

0

0

0

0

0

0

0

2.5

/10

Other packages similar to use-lodash-debounce

Other packages similar to use-lodash-debounce