@xsolla/xui-hooks

Shared React hooks for the XUI toolkit.

Installation

npm install @xsolla/xui-hooks

Usage

useClickOutside

Calls a callback when a mousedown occurs outside the referenced element. The listener is attached only while enabled is strictly true, so you can pass a possibly-nullish flag without coercing it (e.g. only listen while a dropdown is open and you're on the web).

import { useRef, useState } from "react";
import { useClickOutside } from "@xsolla/xui-hooks";

function Dropdown() {
  const ref = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);

  useClickOutside(ref, () => setOpen(false), open);

  return <div ref={ref}>{/* ... */}</div>;
}

Exports

• useClickOutside(ref, callback, enabled) — Fires callback(event) on a mousedown outside ref. Active only when enabled === true; false/null/undefined keep it inactive.