How to use the reakit-system/createComponent.createComponent function in reakit-system

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

setRole("button");
        }
        setType(undefined);
      }
    }, []);

    return {
      ref: mergeRefs(ref, htmlRef),
      role,
      type,
      ...htmlProps
    };
  }
});

export const Button = createComponent({
  as: "button",
  useHook: useButton
});

[options.unstable_setValue, options.name]
    );

    return {
      ...options,
      state: options.unstable_values[options.name],
      setState
    };
  },

  useProps(_, htmlProps) {
    return { role: "menuitemradio", ...htmlProps };
  }
});

export const MenuItemRadio = createComponent({
  as: "button",
  useHook: useMenuItemRadio
});

export const useToolbar = createHook({
  name: "Toolbar",
  compose: unstable_useIdGroup,
  useState: useToolbarState,

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

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

DialogDisclosureHTMLProps;

export const useDialogDisclosure = createHook<
  DialogDisclosureOptions,
  DialogDisclosureHTMLProps
>({
  name: "DialogDisclosure",
  compose: useHiddenDisclosure,
  useState: useDialogState,

  useProps(_, htmlProps) {
    return { "aria-haspopup": "dialog", ...htmlProps };
  }
});

export const DialogDisclosure = createComponent({
  as: "button",
  useHook: useDialogDisclosure
});

useState: usePopoverState,

  useOptions({ modal = false, ...options }) {
    return { modal, ...options };
  },

  useProps(options, { ref: htmlRef, style: htmlStyle, ...htmlProps }) {
    return {
      ref: mergeRefs(options.unstable_popoverRef, htmlRef),
      style: { ...options.unstable_popoverStyles, ...htmlStyle },
      ...htmlProps
    };
  }
});

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

}
  ) {
    return {
      ref: mergeRefs(options.unstable_referenceRef, htmlRef),
      tabIndex: 0,
      onFocus: useAllCallbacks(options.show, htmlOnFocus),
      onBlur: useAllCallbacks(options.hide, htmlOnBlur),
      onMouseEnter: useAllCallbacks(options.show, htmlOnMouseEnter),
      onMouseLeave: useAllCallbacks(options.hide, htmlOnMouseLeave),
      "aria-describedby": options.baseId,
      ...htmlProps
    };
  }
});

export const TooltipReference = createComponent({
  as: "div",
  useHook: useTooltipReference
});

options.baseId,
      generateId
    ]);

    const id = options.id || htmlProps.id || `${baseId}${suffix}`;

    return { ...options, id };
  },

  useProps(options, htmlProps) {
    const id = typeof htmlProps.id === "undefined" ? options.id : htmlProps.id;
    return { ...htmlProps, id };
  }
});

export const unstable_Id = createComponent({
  as: "div",
  useHook: unstable_useId
});

: dir === "right" && options.hide
              }
            : {}
        }),
      [hasParent, ancestorIsHorizontal, next, previous, dir, options.hide]
    );

    return {
      role: "menu",
      onKeyDown: useAllCallbacks(rovingBindings, parentBindings, htmlOnKeyDown),
      ...htmlProps
    };
  }
});

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