diegohaz

import { Toolbar, ToolbarButton, ToolbarGroup } from "@wordpress/components";

<ToolbarButton onClick={...}>Label</ToolbarButton>
<ToolbarButton icon="icon" onClick={...}>Label</ToolbarButton>
<ToolbarButton>
  {props => <DropdownMenu toggleProps={props} />}
</ToolbarButton>


<ToolbarButton as={DropdownMenu} />

diegohaz

import * as React from "react";
import { FixedSizeList as List, areEqual } from "react-window";
import chunk from "lodash/chunk";
import {
  usePopoverState,
  PopoverDisclosure,
  Button,
  PopoverDisclosureHTMLProps,
} from "reakit";
import {

diegohaz

import React from "react";
import {
  useMenuState,
  useMenuBarState,
  Menu as MenuBase,
  MenuBar as MenuBarBase,
  MenuButton,
  MenuItem,
  MenuItemRadio,
  MenuItemCheckbox,

diegohaz

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

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

diegohaz

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

function MyCalendar() {
  return (

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

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 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

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

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(() => {