Skip to main content

Outside click detection hook

v.3.0.1

Installation​

yarn add @mercell/use-on-outside-click-react-hook

Usage​

To utilize the hook you need to prepare reference of the element which will be a point of our outside click detection and action which will be triggered inside the callback property.

To visualize the usage, lets check the example of our mobile sidebar implementation

// openSidebarOnMobile and showSidebar are coming to the component as props to know the current state and trigger state change to close the aside mobile sidebar => (isSidebarOpen: boolean) => void; showSidebar: boolean

// setup reference so we can have point of reference where click is inside and where is outside
const mobileSidebarRef = useRef<HTMLElement>(null);

// setup hook and pass reference as 1st param, callback action as second param
// If user will click inside the sidebar, the hook will not trigger the callback action
useOnOutsideClick(mobileSidebarRef, () => {
    if (showSidebar) openSidebarOnMobile(false);
});
return (
    <aside className="mobile-sidebar" ref={mobileSidebarRef}>
        // sidebar children
    </aside>
)

Advance example with ignoreClassName and disable whole hook conditionally​

We have tried to make this hook as powerful and easy to use as possible, therefore we have made an effort to add two more params that are responsible for omitting the callback action where the element has a specified className or if we want to disable the hook for the specific rerender.

Passing the ignoreClassName (3rd param) will trigger an additional check inside the hook which will compare the className of the element which triggered the event with provided className to decide if the callback should be triggered.

Passing true as isDisabled (4th param) param will stop the process of event detection for that specific rerender (until the param will be false)

Currently, we can recommend using the isDisabled solution if you want to e.g. mount <Modal/> from the <Drawer/> component. <Modal/> will be mounted via portal not inside <Drawer/> so naturally it will trigger callback of OutsideClickHook from the <Drawer/> implementation. We can stop this behavior by passing isDisabled when <Modal/> is visible and when we close it we can resume our hook by not passing isDisabled argument.

Types​

OutsideClickProps
interface OutsideClickInterface {
    componentRef: RefObject<HTMLElement>,
    callback: (event: MouseEvent) => void,
    ignoreClassName: string,
    isDisabled: boolean
}
NameTypeDefaultRequiredDescription
componentRefRefObject<HTMLElement>-yespassing className property to the button icon tag
callback(event: MouseEvent) => void'Show more'yespassing className property to the button text tag
ignoreClassNamestring'ignore-outside-click'nopassing className property to the children wrapper tag
isDisabledbooleanfalsenoall possible properties allowed by CarbonIconProps

Changelog​

Changelog

Change Log - @mercell/use-on-outside-click-react-hook

This log was last generated on Thu, 15 Sep 2022 06:07:41 GMT and should not be manually modified.

3.0.1​

Thu, 15 Sep 2022 06:07:41 GMT

Patches​

  • Migration to Tailwind3, React 18 and ViteJS from webpack.

3.0.0​

Tue, 12 Jul 2022 10:42:52 GMT

Breaking changes​

  • New version of hook to catch all clicks in better way and have a difference between inner clicks and outside clicks

2.0.7​

Thu, 30 Jun 2022 10:57:49 GMT

Patches​

  • Package.json refactor, add test suite, more tests soon

2.0.6​

Fri, 06 May 2022 09:49:59 GMT

Patches​

  • Fix for the ignore class name if order to prevent action for some cases

2.0.5​

Wed, 09 Mar 2022 10:29:16 GMT

Patches​

  • Add option to ignore click if specific class is provided

2.0.4​

Mon, 28 Feb 2022 12:45:49 GMT

Patches​

  • Dependency update

2.0.3​

Mon, 28 Feb 2022 10:55:32 GMT

Patches​

  • Bump typescript

2.0.2​

Wed, 26 Jan 2022 16:19:19 GMT

Patches​

  • Adding the same peerDependencies to devDependencies

2.0.1​

Wed, 03 Nov 2021 15:28:42 GMT

Patches​

  • react types >=17

2.0.0​

Mon, 18 Oct 2021 07:16:21 GMT

Breaking changes​

  • Dependency update

1.0.9​

Fri, 17 Sep 2021 13:18:16 GMT

Patches​

  • Fix for oustide click hook

1.0.8​

Wed, 18 Aug 2021 07:06:37 GMT

Patches​

  • Fix selector problem when id has dots inside name (always null as result)

1.0.7​

Mon, 12 Jul 2021 10:50:09 GMT

Patches​

  • Updating dependencies
  • Updating dependencies

1.0.6​

Wed, 24 Mar 2021 10:17:01 GMT

Patches​

  • Enabling eslint

1.0.5​

Tue, 23 Mar 2021 13:40:42 GMT

Patches​

  • Adding esm module export

1.0.4​

Wed, 17 Mar 2021 10:01:28 GMT

Patches​

  • Adding readme

1.0.3​

Fri, 19 Feb 2021 09:41:17 GMT

Patches​

  • bump

1.0.2​

Fri, 05 Feb 2021 09:50:54 GMT

Patches​

  • target es5

1.0.1​

Thu, 04 Feb 2021 16:02:36 GMT

Patches​

  • ES6 module

1.0.0​

Wed, 03 Feb 2021 12:44:05 GMT

Breaking changes​

  • Add new useOnOutsideClick react hook