react-clicks-without-borders
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

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>
  );
};

Examples

LICENSE

MIT

Thanks to: ooade

Forked from https://github.com/ooade/react-clicks-without-borders as the author did not want the hook abstraction

/react-clicks-without-borders/

    Package Sidebar

    Install

    npm i react-clicks-without-borders

    Weekly Downloads

    3

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    9.93 kB

    Total Files

    10

    Last publish

    Collaborators

    • alphy11