How to use the @react-md/utils.useToggle function in @react-md/utils

export const TOCVisibilityProvider: FC<{ pathname: string }> = ({
  children,
  pathname,
}) => {
  const { isLargeDesktop } = useAppSize();
  const [visible, show, hide, toggle] = useToggle(isLargeDesktop);

  useEffect(() => {
    if (isLargeDesktop) {
      show();
    } else {
      hide();
    }

    // disabled since I only want to update it on desktop changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isLargeDesktop]);

  const rendered =
    pathname !== "/" &&
    pathname !== "/_error" &&
    !pathname.startsWith("/sandbox") &&

export default function useAppSizeContext(): AppSize {
  const defaultSize = useContext(DefaultSize);
  const currentSize = useAppSizeContextRMD();
  const [toggled, , , toggle] = useToggle(false);
  const rendered = useRef(false);
  useEffect(() => {
    if (typeof window === "undefined" || rendered.current) {
      return;
    }

    // always want to re-run in dev mode to be safe with hot-reloading
    rendered.current = process.env.NODE_ENV !== "development";

    // if this is the first "render", wait for the initial hydration
    // to finish and then force a re-render so that the correct app size
    // can be used
    const frame = window.requestAnimationFrame(toggle);

    return () => {
      window.cancelAnimationFrame(frame);

fileName,
  sandbox,
  onFileChange,
  onRequestClose,
}) => {
  const pkgName = toTitle(pkg, " ", true);
  const title = `react-md - ${pkgName} - ${name} Sandbox`;
  const rendered = useRef(false);
  useEffect(() => {
    rendered.current = true;
  }, []);

  const { isPhone, isTablet, isDesktop, isLandscape } = useAppSize();
  const isLandscapeTablet = isLandscape && isTablet;
  const inline = isDesktop || isLandscapeTablet;
  const [isTreeVisible, showTree, hideTree, , setTreeVisible] = useToggle(
    isDesktop
  );

  useEffect(() => {
    if (isTreeVisible !== isDesktop) {
      setTreeVisible(isDesktop);
    }
    // only want to run on media changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isDesktop, isTablet, isPhone]);

  useEffect(() => {
    if (isTreeVisible && !isDesktop) {
      setTreeVisible(false);
    }
    // this effect closes the tree on mobile only after a new file is

>
        {children}
      
    );
  }

  let {
    disableFullPageAppBar,
    disableFullPageContent,
  } = props as WithDefaultProps;
  if (emulated && typeof emulated === "object" && !emulated.appBar) {
    disableFullPageAppBar = true;
    disableFullPageContent = true;
  }

  const [toggled, enable, disable] = useToggle(false);
  return (
    
      {index > 0 && }
      <section id="{id}">
         0 ? "bottom" : "initial"}
        &gt;
          {name}
        
        
          {description}
        
        
          </section>

const Preview: FC = () => {
  const [visible, show, hide] = useToggle(false);
  const container = useRef(null);

  return (
    
      <div>
        
          
            
          
          Theme Preview
        
        </div>

const PositionExamples: FC = () => {
  const [position, setPosition] = useState("bottom");
  const [toggled, , disable, toggle] = useToggle(false);

  const handleChange = useCallback(
    (event: React.ChangeEvent) => {
      setPosition(event.currentTarget.value as SheetPosition);
    },
    []
  );

  return (
    
      <button id="sheet-position-example-toggle"></button>

export default function useRTLToggle(): ReturnValue {
  const defaultToggled = useMemo(() => {
    if (typeof document === "undefined") {
      return false;
    }

    const html = document.querySelector("html") as HTMLElement;
    return html.getAttribute("dir") === "rtl";
  }, []);
  const [isRTL, , , toggleRTL] = useToggle(defaultToggled);

  useEffect(() => {
    const html = document.querySelector("html") as HTMLElement;
    if (isRTL) {
      html.setAttribute("dir", "rtl");
    } else {
      html.setAttribute("dir", "ltr");
    }
  }, [isRTL]);

  return { isRTL, toggleRTL };
}

const CustomTheme: FC = () => {
  const [toggled, , disable, toggle] = useToggle(false);
  return (
    
      <button id="custom-theme-button">
        Show Overlay
      </button>

const SimpleExample: FC = () => {
  const [enabled, , , toggle] = useToggle(false);
  const { style, containerRef } = useRandomStyle(enabled);
  const { height, width, onResize } = useSize();

  return (
    
      <button id="start-resizing">
        {enabled ? "Stop" : "Start"}
      </button>
      <div style="{style}">
        </div>

const Phone: FC = props => {
  const {
    id,
    title,
    children,
    appBar,
    className,
    contentClassName,
    contentStacked: stacked,
    prominent,
    disableAppBar,
    disableContent,
    onPhoneClose,
  } = props as WithDefaultProps;
  const { isPhone } = useAppSize();
  const [visible, enable, disable] = useToggle(false);
  const closePhone = useCallback(() => {
    disable();
    if (onPhoneClose) {
      onPhoneClose();
    }
  }, [onPhoneClose, disable]);

  if (visible && !isPhone) {
    closePhone();
  }

  const value = useMemo(
    () => ({
      id,
      title,
      closePhone,