diegohaz

Update: Ariakit Styles is in alpha. If you want to try it, join us on Discord (see the #news channel).

Ariakit Styles

• Motivation
  • Styles are not very portable
  • Styles don't serve as a reference
  • Styles don't highlight fundamental issues
• Ideal requirements
• User customization

diegohaz

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

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

diegohaz

// notifications.tsx
import * as Ariakit from "@ariakit/react";

interface Item extends Ariakit.NotificationStoreItem {
  onUndo?: () => void;
}

export function useNotification() {
  const notification = Ariakit.useNotificationContext();
  if (!notification) {

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 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 {
  Calendar,
  CalendarRow,
  CalendarCell,
  CalendarWeeks,
  CalendarWeekDays,
} from "@ariakit/react";

function MyCalendar() {
  return (

diegohaz

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

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