Skip to content

Create useClickedOutside hook #128

Open
@leroykorterink

Description

@leroykorterink

We should have a util that makes it easy to detect clicks outside an element. The hook will most likely be used in modal components.

The hook should work with elements from state and RefObjects, a callback function should be called when the element or any of it's descendants are not clicked. The hook shouldn't have any additional properties.

Function signature

function useOutsideClick<T extends Unreffable<T>>(
  target: T,
  callback: (this: Unref<T>, event: MouseEvent) => void
): void;

Portal example

import { useOutsideClick } from '@mediamonks/react-hooks';
import styles from './MyComponent.module.scss';

export type MyComponentProps = {
  onClose(): void;
}

export const MyComponent = ensuredForwardRef<MyComponentProps, HTMLDivElement>((props, ref): ReactNode => {
  useOutsideClick(ref, () => {
    console.log("Element is not clicked");
  });

  return (
    <div ref={ref} className={styles.myComponent}>My content</div>,
  );
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions