diegohaz

import {
  queryByLabelText,
  queryByRole,
  queryByText,
} from "@testing-library/dom";
import type { ByRoleOptions, Matcher } from "@testing-library/dom";

const roles = [
  "alert",
  "alertdialog",

diegohaz

import { Notifications, push } from "./notifications.jsx";

function Example() {
  return (
    <>
      <button
        onClick={() => {
          push("Hello");
          push("Hello", { role: "status" });
          push("Hello", { onUndo: () => {}, timeout: 10000 });

diegohaz

import { useEffect, useRef, useState } from "react";

export function usePerceptibleValue<T>(
  value: T,
  { delay = 0, minDuration = 350 } = {}
) {
  const [perceptibleValue, setPerceptibleValue] = useState(value);
  const nextThresholdRef = useRef(0);

  useEffect(() => {

diegohaz

import { ForwardedRef, useCallback } from 'react';

type OptionalRef<T> = ForwardedRef<T> | undefined;

type Cleanup = (() => void) | undefined | void;

function setRef<T>(ref: OptionalRef<T>, value: T): Cleanup {
  if (typeof ref === 'function') {
    const cleanup = ref(value);

diegohaz

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
 [

diegohaz

type AnyFunction = (...args: any[]) => any

function useEvent<T extends AnyFunction>(callback?: T) {
  const ref = useRef<AnyFunction | undefined>(() => {
    throw new Error("Cannot call an event handler while rendering.")
  })
  // Or useInsertionEffect if it's React 18
  useLayoutEffect(() => {
    ref.current = callback
  })

diegohaz

What is Ariakit?

Ariakit is the successor of Reakit, an open source library that provides lower-level React components and hooks for building accessible web apps, design systems, and other component libraries.

Why the name change?

Reakit stands for React Toolkit. Ariakit stands for Aria Toolkit, which is better aligned with our goals.

Over the past years, we've been focusing more and more on the ARIA aspects of the library. In the future, we'd like to provide more framework-agnostic utilities.

diegohaz

type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;

const Link = createBlock<LinkProps>((props) => {
  const { onSelectionChange, selectBlockContents } = useEditorState(props);
  const popover = usePopoverState({ portal: true });
  const [href, setHref] = useState(props.href);

  useEffect(() => {
    setHref(props.href);
  }, [props.href]);

diegohaz

import {
  useCalendarStore,
  Calendar,
  CalendarRow,
  CalendarCell,
} from "@ariakit/react";

function MyCalendar() {
  const calendar = useCalendarStore({
    defaultDate: new Date("2019-03-02"),

diegohaz

import {
  useTreeState,
  Tree,
  TreeItem,
  TreeGroup,
  TreeGroupLabel,
} from "ariakit/tree";

function TreeView() {
  const state = useTreeState({ defaultExpandedIds: ["item-1"] });