Zag.js Has a Free API That Most Developers Dont Know About

#javascript #react #ui #webdev

Zag.js uses finite state machines to power UI components. Framework-agnostic, it works with React, Vue, Solid, and Svelte — providing accessible, interactive components.

State Machine Approach

import * as dialog from "@zag-js/dialog";
import { useMachine, normalizeProps } from "@zag-js/react";

function Dialog() {
  const [state, send] = useMachine(dialog.machine({ id: "1" }));
  const api = dialog.connect(state, send, normalizeProps);

  return (
    <>
      <button {...api.getTriggerProps()}>Open</button>
      {api.open && (
        <div {...api.getBackdropProps()}>
          <div {...api.getContentProps()}>
            <h2 {...api.getTitleProps()}>Title</h2>
            <p {...api.getDescriptionProps()}>Description</p>
            <button {...api.getCloseTriggerProps()}>Close</button>
          </div>
        </div>
      )}
    </>
  );
}

Toast

import * as toast from "@zag-js/toast";

const [state, send] = useMachine(toast.group.machine({ id: "1" }));
const api = toast.group.connect(state, send, normalizeProps);

api.create({ title: "Success!", type: "success", duration: 3000 });