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

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

Name	Type	Description
onOutsideClick(required)	() => void	Function called when a click occurs outside the consumer's area 소비자 컴포넌트의 영역을 제외한 영역을 클릭했을 때 호출되는 함수
children(required)	JSX.Element	Consumer Component 소비자 컴포넌트
disabled(optional)	boolean(default: false)	ouside click disabled 외부 영역 클릭 비활성화
capture(optional)	boolean(default: true)	Whether capturing is enabled 캡처링 사용 여부