@lani.ground/react-outside-click-handler v1.1.2

react-outside-click-handler

Handler component that make it easier to control when you click on a component other than the one you want.

Demo

Example

Installation

npm install @lani.ground/react-outside-click-handler

// or

yarn add @lani.ground/react-outside-click-handler

Usage

import { OutsideClickHandler } from "@lani.ground/react-outside-click-handler";

const [selectedOption, setSelectedOption] = useState<string>("");
const [isOpen, setIsOpen] = useState<boolean>(false);

const OPTIONS = ["option1", "option2", "option3"];

<button type="button" onClick={() => setIsOpen(true)}>
  Click Me
</button>

{
  isOpen && (
    <OutsideClickHandler onOutsideClick={() => setIsOpen(false)}>
      <ul className="bg-gray-500 px-5">
        {OPTIONS.map((option) => (
          <li>
            <button
              type="button"
              onClick={() => {
                setIsOpen(false);
              }}
            >
              {option}
            </button>
          </li>
        ))}
      </ul>
    </OutsideClickHandler>
  );
}

<p>
  selected: <strong>{selectedOption}</strong>
</p>

Props