React Hook House

A house of useful react hooks.

Get started

To add React Hook House to your project.

pnpm install react-hook-house

Examples

useOutsideClick

"use client";
import React, { useRef, useState } from "react";
import { useOutsideClick } from "react-hook-house";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const modal = useRef(null);

  const handleClick = () => setIsOpen((pre) => !pre);

  userOutsideClick([modal], isOpen, handleClick);

  return (
    <div className="container">
      {isOpen ? (
        <div className="modal" ref={modal}>
          <div className="user">
            <h2 className="userName">Example</h2>
            <img className="userImage" src="/user-img.jpg" />
          </div>
        </div>
      ) : (
        <></>
      )}
      <button className="button" onClick={handleClick}>
        Show User
      </button>
    </div>
  );
}