How to use reakit-system - 10 common examples

export function PlaygroundPreview({
  code,
  modules,
  update,
  componentName,
  ...htmlProps
}: PlaygroundPreviewOptions & PlaygroundPreviewHTMLProps) {
  const options = useOptions(
    "PlaygroundPreview",
    { code, modules, componentName },
    htmlProps
  );

  const ref = React.useRef(null);
  const { id: prefix } = useId({ baseId: "preview" });
  const [error, setError] = React.useState(null);

  const handleError = React.useCallback((e: Error) => {
    setError(e);
    console.error(e); // eslint-disable-line no-console
  }, []);

  const [rendered, setRendered] = React.useState(() => {
    try {

usePopover
} from "../Popover/Popover";
import { MenuBarOptions, MenuBarHTMLProps, useMenuBar } from "./MenuBar";
import { useMenuState, MenuStateReturn } from "./MenuState";
import { MenuContext, MenuContextType } from "./__utils/MenuContext";

export type MenuOptions = Omit &
  Pick &
  Pick, "first" | "last"> &
  MenuBarOptions;

export type MenuHTMLProps = PopoverHTMLProps & MenuBarHTMLProps;

export type MenuProps = MenuOptions & MenuHTMLProps;

export const useMenu = createHook({
  name: "Menu",
  compose: [useMenuBar, usePopover],
  useState: useMenuState,

  useOptions(options) {
    const parent = React.useContext(MenuContext);
    const parentIsMenuBar = parent && parent.role === "menubar";

    return {
      unstable_autoFocusOnShow: !parent,
      unstable_autoFocusOnHide: !parentIsMenuBar,
      modal: false,
      ...options,
      // will be handled differently from usePopover/useDialog
      hideOnEsc: false
    };

element.tagName === "A" ||
    element.tagName === "AUDIO" ||
    element.tagName === "VIDEO"
  );
}

// https://twitter.com/diegohaz/status/1176998102139572225
function isUserAgent(string: string) {
  if (typeof window === "undefined") return false;
  return window.navigator.userAgent.indexOf(string) !== -1;
}

const isSafariOrFirefoxOnMac =
  isUserAgent("Mac") && (isUserAgent("Safari") || isUserAgent("Firefox"));

export const useTabbable = createHook({
  name: "Tabbable",
  compose: useBox,
  keys: [
    "disabled",
    "focusable",
    "unstable_clickOnEnter",
    "unstable_clickOnSpace"
  ],

  useOptions(
    { unstable_clickOnEnter = true, unstable_clickOnSpace = true, ...options },
    { disabled }
  ) {
    return {
      disabled,
      unstable_clickOnEnter,

import { unstable_IdStateReturn, unstable_useIdState } from "./IdState";
import { unstable_IdContext } from "./IdProvider";

export type unstable_IdOptions = BoxOptions &
  Pick, "baseId" | "unstable_idCountRef"> & {
    /**
     * Same as the HTML attribute.
     */
    id?: string;
  };

export type unstable_IdHTMLProps = BoxHTMLProps;

export type unstable_IdProps = unstable_IdOptions & unstable_IdHTMLProps;

export const unstable_useId = createHook<
  unstable_IdOptions,
  unstable_IdHTMLProps
>({
  name: "Id",
  compose: useBox,
  useState: unstable_useIdState,
  keys: ["id"],

  useOptions(options, htmlProps) {
    const generateId = React.useContext(unstable_IdContext);

    const [suffix] = React.useState(() => {
      // This comes from useIdState
      if (options.unstable_idCountRef) {
        options.unstable_idCountRef.current += 1;
        return `-${options.unstable_idCountRef.current}`;

return () => clearTimeout(timer);
  }, [
    options.code,
    options.modules,
    options.componentName,
    renderChildren,
    handleError,
    unmount
  ]);

  React.useEffect(() => {
    // Ensure that we unmount the React component when the effect is destroyed.
    return () => unmount();
  }, [unmount]);

  htmlProps = useProps("PlaygroundPreview", options, htmlProps);

  return (
    
      <div>
        {error &amp;&amp; }
        <div>{renderChildren(rendered)}</div>
      </div>
    
  );
}

useProps(_, htmlProps) {
    const color = usePalette("link");
    const anchor = css`
      color: ${color};
      font-weight: 500;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    `;
    return { ...htmlProps, className: cx(anchor, htmlProps.className) };
  }
});

const Anchor = createComponent({
  as: "a",
  useHook: useAnchor,

  useCreateElement(type, { href, ...props }, children) {
    if (href && /^\/(?!\/)/.test(href)) {
      return useCreateElement(Link, { to: href, ...props }, children);
    }
    return useCreateElement(type, { href, ...props }, children);
  }
});

export default Anchor;

useCreateElement(type, { href, ...props }, children) {
    if (href && /^\/(?!\/)/.test(href)) {
      return useCreateElement(Link, { to: href, ...props }, children);
    }
    return useCreateElement(type, { href, ...props }, children);
  }
});

useCreateElement(type, { href, ...props }, children) {
    if (href && /^\/(?!\/)/.test(href)) {
      return useCreateElement(Link, { to: href, ...props }, children);
    }
    return useCreateElement(type, { href, ...props }, children);
  }
});

export const useTabList = createHook({
  name: "TabList",
  compose: unstable_useIdGroup,
  useState: useTabState,

  useProps(options, htmlProps) {
    return {
      role: "tablist",
      "aria-orientation": options.orientation,
      ...htmlProps
    };
  }
});

export const TabList = createComponent({
  as: "div",
  useHook: useTabList,
  useCreateElement: (type, props, children) => {
    warning(
      !props["aria-label"] && !props["aria-labelledby"],
      "[reakit/TabList]",
      "You should provide either `aria-label` or `aria-labelledby` props.",
      "See https://reakit.io/docs/tab"
    );
    return useCreateElement(type, props, children);
  }
});

MenuSeparatorOptions,
  MenuSeparatorHTMLProps
>({
  name: "MenuSeparator",
  compose: useSeparator,
  useState: useMenuState,

  useOptions({ orientation = "vertical", ...options }) {
    return {
      orientation: orientation === "vertical" ? "horizontal" : "vertical",
      ...options
    };
  }
});

export const MenuSeparator = createComponent({
  as: "hr",
  useHook: useMenuSeparator
});