How to use the reakit-system.createHook function in reakit-system

import { css, cx } from "emotion";
import { useBox, BoxHTMLProps, BoxOptions } from "reakit";
import { createHook, createComponent } from "reakit-system";

export type HiddenMediaQueryOptions = BoxOptions & {
  query: string;
};

export type HiddenMediaQueryHTMLProps = BoxHTMLProps;

export type HiddenMediaQueryProps = HiddenMediaQueryOptions &
  HiddenMediaQueryHTMLProps;

export const useHiddenMediaQuery = createHook<
  HiddenMediaQueryOptions,
  HiddenMediaQueryHTMLProps
>({
  name: "HiddenMediaQuery",
  compose: useBox,
  keys: ["query"],

  useProps(options, htmlProps) {
    const hiddenMediaQuery = css`
      @media (${options.query}) {
        display: none !important;
      }
    `;

    return {
      ...htmlProps,

import { css, cx } from "emotion";
import { createHook, createComponent } from "reakit-system";
import { usePalette } from "reakit-system-palette/utils";
import { useAnchor, AnchorOptions, AnchorProps } from "./Anchor";

export type SkipToContentOptions = AnchorOptions;
export type SkipToContentHTMLProps = AnchorProps;
export type SkipToContentProps = SkipToContentOptions & SkipToContentHTMLProps;

export const useSkipToContent = createHook<
  SkipToContentOptions,
  SkipToContentHTMLProps
>({
  name: "SkipToContent",
  compose: useAnchor,

  useProps(_, htmlProps) {
    const background = usePalette("background");

    const skipToContent = css`
      left: -999px;
      position: absolute;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;

usePalette,
  useLighten,
  useContrast
} from "reakit-system-palette/utils";
import TestTube from "../icons/TestTube";

export type BlockquoteOptions = BoxOptions & {
  experimental?: "true" | "false";
};

export type BlockquoteHTMLProps = BoxHTMLProps &
  React.BlockquoteHTMLAttributes;

export type BlockquoteProps = BlockquoteOptions & BlockquoteHTMLProps;

export const useBlockquote = createHook(
  {
    name: "Blockquote",
    compose: useBox,
    keys: ["experimental"],

    useProps(options, htmlProps) {
      const isExperimental = options.experimental === "true";
      const warning = usePalette("warning");
      const backgroundColor = useLighten(warning, 0.85);
      const borderColor = useLighten(warning, 0.3);
      const color = useContrast(backgroundColor);
      const blockquote = css`
        color: ${color};
        background-color: ${backgroundColor};
        border-left-color: ${borderColor};
        border-left-width: 8px;

import * as React from "react";
import { css, cx } from "emotion";
import { useBox, BoxHTMLProps, BoxOptions } from "reakit";
import { usePalette } from "reakit-system-palette/utils";
import { createHook, createComponent, useCreateElement } from "reakit-system";
import { Link } from "gatsby";

export type AnchorOptions = BoxOptions;
export type AnchorHTMLProps = BoxHTMLProps & React.AnchorHTMLAttributes;
export type AnchorProps = AnchorOptions & AnchorHTMLProps;

export const useAnchor = createHook({
  name: "Anchor",
  compose: useBox,

  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) };
  }

import { css, cx } from "emotion";
import { useBox, BoxHTMLProps, BoxOptions } from "reakit";
import { createHook, createComponent } from "reakit-system";
import { usePalette, useDarken } from "reakit-system-palette/utils";

export type KeyboardInputOptions = BoxOptions;
export type KeyboardInputHTMLProps = BoxHTMLProps;
export type KeyboardInputProps = KeyboardInputOptions & KeyboardInputHTMLProps;

export const useKeyboardInput = createHook<
  KeyboardInputOptions,
  KeyboardInputHTMLProps
>({
  name: "KeyboardInput",
  compose: useBox,

  useProps(_, htmlProps) {
    const background = usePalette("background");
    const backgroundColor = useDarken(background, 0.08);
    const borderColor = useDarken(backgroundColor, 0.15);
    const keyboardInput = css`
      border-radius: 0.25em;
      font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
      background-color: ${backgroundColor};
      padding: 0.3em 0.5em 0.25em;
      border: 1px solid ${borderColor};

import { css, cx } from "emotion";
import { useBox, BoxHTMLProps, BoxOptions } from "reakit";
import { createHook, createComponent } from "reakit-system";

export type ParagraphOptions = BoxOptions;
export type ParagraphHTMLProps = BoxHTMLProps;
export type ParagraphProps = ParagraphOptions & ParagraphHTMLProps;

export const useParagraph = createHook({
  name: "Paragraph",
  compose: useBox,

  useProps(_, htmlProps) {
    const paragraph = css`
      line-height: 1.5;
    `;
    return { ...htmlProps, className: cx(paragraph, htmlProps.className) };
  }
});

const Paragraph = createComponent({
  as: "p",
  useHook: useParagraph
});

import { css, cx } from "emotion";
import { useBox, BoxHTMLProps, BoxOptions } from "reakit";
import { createHook, createComponent } from "reakit-system";

export type ListOptions = BoxOptions;
export type ListHTMLProps = BoxHTMLProps;
export type ListProps = ListOptions & ListHTMLProps;

export const useList = createHook({
  name: "List",
  compose: useBox,

  useProps(_, htmlProps) {
    const list = css`
      line-height: 1.5;
      li {
        margin-bottom: 0.5em;
      }
      #props ~ &,
      #props ~ details > & {
        & > li {
          li {
            margin: 0;
          }
          strong ~ code {

import { css, cx } from "emotion";
import { useBox, BoxHTMLProps, BoxOptions } from "reakit";
import { createHook, createComponent } from "reakit-system";

export type HeadingOptions = BoxOptions;
export type HeadingHTMLProps = BoxHTMLProps;
export type HeadingProps = HeadingOptions & HeadingHTMLProps;

export const useHeading = createHook({
  name: "Heading",
  compose: useBox,

  useProps(_, htmlProps) {
    const heading = css`
      line-height: 1.5;
      & > .anchor:focus > *,
      &:hover > .anchor > * {
        visibility: visible;
      }
      & > .anchor > * {
        visibility: hidden;
      }
      h1& {
        font-size: 2.5em;
        @media (max-width: 768px) {