Logic Primitives

Functional Hooks.

The UiBrium sanctuary provides a suite of headless logic primitives designed to handle complex state and event orchestration with zero-runtime overhead.

useDisclosure

A logic primitive for managing open/closed states (modals, drawers, accordions) with ease.

const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

import { useDisclosure, Button, Modal } from '@uibrium/ui';

export function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        Content
      </Modal>
    </>
  );
}

useClickOutside

Detects interactions outside a target element, perfect for dropdowns and popovers.

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

import { useClickOutside } from '@uibrium/ui';

export function Dropdown() {
  const ref = useRef();
  useClickOutside(ref, () => setIsOpen(false));

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

useMediaQuery

A reactive hook for tracking CSS media queries. Efficient and SSR-friendly.

const isMobile = useMediaQuery('(max-width: 768px)');

import { useMediaQuery } from '@uibrium/ui';

export function Responsive() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
}

Need more primitives?

We are constantly expanding our sanctuary of hooks. If you have a logic primitive that simplifies your workflow, we'd love to see it in the core library.

Request Blueprint