React Hooks

Orbitus provides a collection of custom React hooks to simplify common UI and logic patterns. These hooks are designed to be type-safe and SSR-compatible.

Custom Hooks

useClickOutside

Trigger a callback when clicking outside of a specified element. Useful for closing modals, dropdowns, or popovers.


import { useRef, useState } from 'react';
import { useClickOutside } from '@orbitusdev/core/hooks';
 
export function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
 
  useClickOutside(ref, () => setIsOpen(false));
 
  return (
    <div ref={ref}>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      {isOpen && <div className="dropdown-menu">Content</div>}
    </div>
  );
}

useHotkeys

Bind keyboard shortcuts to actions. Supports modifier keys (Cmd, Ctrl, Shift, Alt).


import { useHotkeys } from '@orbitusdev/core/hooks';
 
export function Editor() {
  useHotkeys([
    {
      key: 's',
      metaKey: true, // Cmd+S (Mac) or Win+S (Windows)
      action: (e) => {
        e.preventDefault();
        saveDocument();
      },
    },
    {
      key: 'Escape',
      action: () => closeModal(),
    },
  ]);
 
  return <div>Press Cmd+S to save</div>;
}

useMobile

Detect if the viewport is currently in mobile width (default < 768px). Safe for SSR (returns false initially).


import { useMobile } from '@orbitusdev/core/hooks';
 
export function Sidebar() {
  const isMobile = useMobile();
 
  if (isMobile) {
    return <MobileMenu />;
  }
 
  return <DesktopSidebar />;
}

useCookieConsent

Manage user cookie preferences and detect bots. Returns flags for different consent categories.


import { useCookieConsent } from '@orbitusdev/core/hooks';
 
export function AnalyticsComponent() {
  const { canUseAnalytics } = useCookieConsent();
 
  if (!canUseAnalytics) {
    return null;
  }
 
  return <GoogleAnalytics />;
}

useCanvasConfetti

Trigger confetti animations on a canvas.


import { useRef } from 'react';
import { useCanvasConfetti } from '@orbitusdev/core/hooks';
 
export function Celebration() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const { fire } = useCanvasConfetti(canvasRef);
 
  return (
    <>
      <canvas ref={canvasRef} />
      <button onClick={fire}>Celebrate!</button>
    </>
  );
}

useGithubStats

Fetch repository statistics (stars, forks) from GitHub.


import { useGithubStats } from '@orbitusdev/core/hooks';
 
export function RepoCard() {
  const { stars, forks, isLoading } = useGithubStats('orbitusdev/orbitus');
 
  if (isLoading) return <div>Loading...</div>;
 
  return <div>{stars} Stars</div>;
}

Built-in React Hooks

Orbitus encourages standard usage of built-in React hooks:

useState: For local component state.
useEffect: For side effects (data fetching, subscriptions).
useContext: For consuming context providers.
useCallback: For memoizing event handlers.
useMemo: For memoizing expensive calculations.
useRef: For accessing DOM elements or storing mutable values.

Rules of Hooks

Only call hooks at the top level of your component.
Only call hooks from React function components or custom hooks.