use-click-outside-ref
v0.1.0
Published
React hook to create a ref and listening click outside event of the ref.
Downloads
6
Maintainers
Readme
use-click-outside-ref
React hook to create a ref and listening click outside event of the ref.
Usage
useClickOutsideRef()
import React, { useState, useRef } from 'react'
import { useClickOutsideRef } from 'use-click-outside-ref'
export default () => {
const [collapsed, setCollpased] = useState(false);
const dropdownRef = useClickOutsideRef(() => setCollpased(false));
return (
<div ref={dropdownRef}>
<span onClick={() => setCollpased(!collapsed)}>Toggle</span>
{collapsed && <div className="dropdown" />}
</div>
);
};
useClickOutside()
import React, { useState, useRef } from 'react'
import { useClickOutside } from 'use-click-outside-ref'
export default () => {
const [collapsed, setCollpased] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
useClickOutside(dropdownRef, () => setCollpased(false));
return (
<div ref={dropdownRef}>
<span onClick={() => setCollpased(!collapsed)}>Toggle</span>
{collapsed && <div className="dropdown" />}
</div>
);
};
API
useClickOutsideRef()
return a ref and listen to the click outside event.
callback: function
useClickOutside()
listening click outside event of an element.
ref: element
callback: function