/reactuse

target

Wraps DOM target references in the shape Reactuse hooks understand, especially when the target is not a React ref.

Usage

import { target, useClickOutside } from "@siberiacancode/reactuse";

useClickOutside(target("#container"), () => console.log("outside"));

Example

string:

import { target, useClickOutside } from "@siberiacancode/reactuse";

useClickOutside(target("#container"), () => console.log("outside"));

Element:

useClickOutside(target(document.getElementById("container")!), () =>
  console.log("outside")
);

Document:

useClickOutside(target(document), () => console.log("document"));

Window:

useClickOutside(target(window), () => console.log("window"));

getter function:

useClickOutside(target(() => document.querySelector("#container")), () => {
  console.log("outside");
});

Type Declarations

import type { RefObject } from "react";

export type Target =
  | (() => Document | Element | Window)
  | string
  | Document
  | Element
  | Window;
interface StateRef<Value> {
  (node: Value): void;
  current: Value;
  state: Value;
}
export type HookTarget =
  | ReturnType<typeof target>
  | RefObject<Element | null | undefined>
  | StateRef<Element | null | undefined>;
export declare const target: (target: Target) => {
  value: Target;
  type: symbol;
};