npmpackage.info

use-click-document

react-hooks component

1.0.0

TypeScript

4.08 kB

Installations

npm install use-click-document

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.3.0

NPM Version

7.15.1 Score

Supply Chain

72.5

Quality

75.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

2

Total

10

Closed

5

Merged

3

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 1 Contributors

Languages

TypeScript

TypeScript (100%)

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

Developer

shatee

Download Statistics

Total Downloads

1,155

Last Day

Last Week

Last Month

Last Year

174

GitHub Statistics

13 Commits

2 Watchers

3 Branches

1 Contributors

Updated on Jul 07, 2021

Maintainers

Package Meta Information

Latest Version

1.0.0

Package Id

use-click-document@1.0.0

Unpacked Size

4.08 kB

Size

1.37 kB

File Count

NPM Version

7.15.1

Node Version

16.3.0

Total Downloads

Cumulative downloads

Total Downloads

1,155

Last Day

Compared to previous day

Last Week

-33.3%

Compared to previous week

Last Month

1,450%

Compared to previous month

Last Year

-1.1%

174

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react-dom

Dev Dependencies

@types/react react react-dom typescript webpack

use-click-document

install

npm install use-click-document

usage basis

1import React, { useCallback } from 'react';
2import { useClickDocument } from 'use-click-document';
3 
4const SomeComponent = () => {
5  const onAnythingClick = useCallback((event: MouseEvent) => {
6    console.log('clicked anything', event.target);
7  }, []);
8
9  useClickDocument(onAnythingClick);
10 
11  return <div>something</div>;
12};

usage ignored target refs

1import React, { useCallback, useRef } from 'react';
2import { useClickDocument } from 'use-click-document';
3 
4const SomeComponent = () => {
5  const refA = useRef<HTMLElement>(null);
6  const refB = useRef<HTMLElement>(null);
7
8  const onClickIgnoredAB = useCallback((event: MouseEvent) => {
9    console.log('clicked not a and b', event.target);
10  }, []);
11
12  useClickDocument(onClickIgnoredAB, [refA, refB]);
13
14  return (
15  <div>
16    <div ref={refA}>A</div>
17    <div ref={refB}>B</div>
18    <div>C</div>
19  </div>
20  );
21};

No vulnerabilities found.

10

Binary-Artifacts

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

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

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

License

Determines if the project has defined a license.

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.

Score

2.1

/10

Last Scanned on 2025-02-10

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-click-document

use-click-away

0.0.1

React hook that triggers a callback when user clicks outside the element.

@app-elements/use-document-click

0.1.1

A (P)React hook to handle document clicks or taps.