use-click-document
v1.0.0
Published
on document click react-hooks
Downloads
8
Readme
use-click-document
install
npm install use-click-document
usage basis
import React, { useCallback } from 'react';
import { useClickDocument } from 'use-click-document';
const SomeComponent = () => {
const onAnythingClick = useCallback((event: MouseEvent) => {
console.log('clicked anything', event.target);
}, []);
useClickDocument(onAnythingClick);
return <div>something</div>;
};
usage ignored target refs
import React, { useCallback, useRef } from 'react';
import { useClickDocument } from 'use-click-document';
const SomeComponent = () => {
const refA = useRef<HTMLElement>(null);
const refB = useRef<HTMLElement>(null);
const onClickIgnoredAB = useCallback((event: MouseEvent) => {
console.log('clicked not a and b', event.target);
}, []);
useClickDocument(onClickIgnoredAB, [refA, refB]);
return (
<div>
<div ref={refA}>A</div>
<div ref={refB}>B</div>
<div>C</div>
</div>
);
};