The react-clicks-without-borders from alphy11

react-clicks-without-borders's Introduction

Installation

yarn add react-clicks-without-borders

It's quite small in size.
It's built with TypeScript.
It supports both Mouse and Touch Events.
Bring your own element!

Usage

Bring your own div

import { useOutsideClickListener } from 'react-clicks-without-borders';

const App = () => {
  const ref = useOutsideClickListener(() => {
    console.log('Hey, you can close the Popup now');
  });

  return (
    <div id="app">
      <div ref={ref}> Some Popup, Nav or anything </div>
      <div id="rest-of-the-app">Don't name a div like that :(</div>
    </div>
  );
};

Bring your own span!

import { useOutsideClickListener } from 'react-clicks-without-borders';

const App = () => {
  const ref = useOutsideClickListener<HTMLSpanElement>(() => {
    console.log('Hey, you can close the Popup now');
  });

  return (
    <div id="app">
      <span ref={ref}> Some Popup, Nav or anything </span>
      <div id="rest-of-the-app">Don't name a div like that :(</div>
    </div>
  );
};

Bring your own ref!

import { useOutsideClickListener } from 'react-clicks-without-borders';

const App = () => {
  const ref = React.useRef();
  useOutsideClickListener(
    () => {
      console.log('Hey, you can close the Popup now');
    },
    { ref },
  );

  return (
    <div id="app">
      <span ref={ref}> Some Popup, Nav or anything </span>
      <div id="rest-of-the-app">Don't name a div like that :(</div>
    </div>
  );
};

Use it's div

import OutsideClickListener from 'react-clicks-without-borders';

const App = () => {
  const handleClickAway = () => {
    console.log('Hey, you can close the Popup now');
  };

  return (
    <div id="app">
      <OutsideClickListener onClickAway={handleClickAway}>
        <div> Some Popup, Nav or anything </div>
      </OutsideClickListener>
      <div id="rest-of-the-app">Don't name a div like that :(</div>
    </div>
  );
};