Lightweight and accessible clickoutside React ref
yarn add @pofo/click-outside
npm i @pofo/click-outside
- Call onClick function when user clicks outside of component
- Call onClick function when user presses the escape key
- Support multiple refs with the same onClick function
Refs are always returned in an array of 1 or more refs.
import useClickOutisdeRef from '@pofo/click-outside';
const MyComponent = () => {
const onClick = () => {
// ... do something
}
/* CLICKOUTSIDE REF */
const [ ref ] = useClickOutsideRef( onClick );
return (
<div ref={ref}>
Click outisde of me to trigger the onClick function!
</div>
)
}If you want more than one ref attached to the same onClick function, specify the number of refs you want in the optional options object.
import useClickOutisdeRef from '@pofo/click-outside';
const MyComponent = () => {
const onClick = () => {
// ... do something
}
/* CLICKOUTSIDE REF */
const [ ref1, ref2 ] = useClickOutsideRef( onClick, { numRefs: 2 } );
return (
<div ref={ref1}>
Click outside of me to trigger the onClick function!
</div>
<div ref={ref2}>
Clicking outside of me will also trigger the same onClick function!
</div>
)
}By default, pressing the escape key will call the onClick function as well. If you wish to disable this functionality, pass an options object with enableEscape as false.
import useClickOutisdeRef from '@pofo/click-outside';
const MyComponent = () => {
const onClick = () => {
// ... do something
}
/* CLICKOUTSIDE REF */
const [ ref ] = useClickOutsideRef( onClick, { enableEscape: false } );
return (
<div ref={ref}>
Pressing escape will not trigger the onClick, but clicking outside me will!
</div>
)
}useClickOutsideRef(
// requried
onClick: () => void,
// optional
options: {
numRefs?: number,
enableEscape?: boolean,
},
)| Parameter | Default | Type | Description |
|---|---|---|---|
onClick |
REQUIRED |
() => void |
onClick function that gets called when user clicks off the component. By default, also gets called when user clicks the escape key |
options |
{ numRefs: 1, enableEscape: true } |
{ numRefs: number, enableEscape: boolean } |
Optional options object. numRefs: Specifies the number of refs you would like returned. enableEscape: When set to true, pressing the escape key will trigger the onClick function. If set to false, pressing the escape key will not trigger the onClick function. Defaults to true. |
You can specify what kind of HTML Element your ref is going to be attached to.
const [ ref ] = useClickOutsideRef<HTMLDivElement>( () => {} );If you are returning multiple refs that are different kinds of HTML Elements.
import { RefObject } from 'react';
import useClickOutisdeRef from '@pofo/click-outside';
const MyComponent = () => {
const onClick = () => {
// ...do something
}
/* CLICKOUTSIDE REF */
const [ ref1, ref2 ] = useClickOutsideRef( onClick );
return (
<section>
<div ref={ref1 as RefObject<HTMLDivElement>}>
I am a div!
</div>
<span ref={ref2 as RefObject<HTMLSpanElement>}>
I am a span!
</span>
</section>
)
}IF YOU KNOW A BETTER WAY TO SUPPORT TYPESCRIPT, PLS HELP AND CREATE A PULL REQUEST
This library plays well with useFocusTrap
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent