How to use @react-md/utils - 10 common examples

private init = (id: string) => {
    const container: null | HTMLElement = document.querySelector(`[aria-describedby="${id}"]`);
    if (!container) {
      // tslint:disable-next-line:no-console
      console.error(
        'A tooltip\'s container must have the attribute `aria-describedby="TOOLTIP_ID"` for accessibility ' +
          `but none were found for a tooltip with id: \`${id}\`. This tooltip will be unable to be shown ` +
          "until this is fixed."
      );
      return;
    }

    if (!this.containers.find(({ container: c }) => c === container)) {
      const sizingContainer = findSizingContainer(container) as HTMLElement;
      sizingContainer.addEventListener("mouseenter", this.handleMouseEnter);

      this.containers.push({ container, sizingContainer });
    }
  };

public componentDidMount() {
    if (!this.props.pressable) {
      return;
    }

    this.el = ReactDOM.findDOMNode(this) as HTMLElement;
    if (!isFocusable(this.el, true)) {
      while (this.el && !isFocusable(this.el, true)) {
        this.el = this.el.parentElement;
      }
    }

    if (!this.el) {
      if (process.env.NODE_ENV === "development") {
        /* tslint:disable:no-console */
        console.error(
          "The `StatesConsumer` component was mounted without finding a valid " +
            "HTMLElement as one of its children. This should be fixed before " +
            "deploying to production as your element will have no focus, hover, " +
            "or pressed styles applied."
        );
        console.error(new Error().stack);
        /* tslint:enable:no-console */
      }

public componentDidMount() {
    if (!this.props.pressable) {
      return;
    }

    this.el = ReactDOM.findDOMNode(this) as HTMLElement;
    if (!isFocusable(this.el, true)) {
      while (this.el && !isFocusable(this.el, true)) {
        this.el = this.el.parentElement;
      }
    }

    if (!this.el) {
      if (process.env.NODE_ENV === "development") {
        /* tslint:disable:no-console */
        console.error(
          "The `StatesConsumer` component was mounted without finding a valid " +
            "HTMLElement as one of its children. This should be fixed before " +
            "deploying to production as your element will have no focus, hover, " +
            "or pressed styles applied."
        );
        console.error(new Error().stack);
        /* tslint:enable:no-console */

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

export function useTooltipHoverModeState(
  defaultDelay: number,
  delayTimeout: number
): TooltipHoverModeState {
  const [delay, setDelay] = useState(defaultDelay);
  const delayRef = useRefCache(delay);

  const disable = useCallback(() => {
    if (delayRef.current === 0) {
      setDelay(defaultDelay);
    }
    // disabled since useRefCache
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [defaultDelay]);

  const [start, stop] = useTimeout(disable, delayTimeout);
  const enable = useCallback(() => {
    stop();
    if (delayRef.current !== 0) {
      setDelay(0);
    }
    // disabled since useRefCache

export default function useValuedState({
  onChange,
  value,
  defaultValue,
}: Options): [boolean, ChangeEventHandler | undefined] {
  const handler = useRefCache(onChange);
  const [valued, enable, disable] = useToggle(() => {
    if (typeof value === "undefined") {
      return (
        typeof defaultValue === "number" || (defaultValue || "").length > 0
      );
    }

    // this isn't used for controlled components
    return false;
  });

  const handleChange = useCallback>(
    event => {
      const onChange = handler.current;
      if (onChange) {
        onChange(event);

const { exiting, style } = ripple;

  let timeout = propTimeout;
  let classNames = propClassNames;
  const context = useStatesConfigContext();
  if (typeof timeout === "undefined" || typeof classNames === "undefined") {
    if (typeof timeout === "undefined") {
      timeout = context.rippleTimeout;
    }

    if (typeof classNames === "undefined") {
      classNames = context.rippleClassNames;
    }
  }

  const ref = useRefCache({ ripple, entered, exited });
  const onEntered = useCallback(() => {
    const { ripple, entered } = ref.current;
    entered(ripple);
    // disabled since useRefCache
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const onExited = useCallback(() => {
    const { ripple, exited } = ref.current;
    exited(ripple);
    // disabled since useRefCache
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (

export function useKeyboardState({
  mode,
  showTooltip,
  hideTooltip,
  delay,
  initiated,
  setInitiated,
  onFocus,
  onBlur,
  onKeyDown,
  setEstimatedPosition,
}: KeyboardOptions): KeyboardResult {
  const handlers = useRefCache({ onFocus, onBlur, onKeyDown });
  const isWindowBlurred = useRef(false);

  const [start, stop] = useTimeout(() => {
    if (initiated.current === "keyboard") {
      showTooltip();
    }
  }, delay);

  const handleFocus = useCallback(
    (event: React.FocusEvent) => {
      const { onFocus } = handlers.current;
      if (onFocus) {
        onFocus(event);
      }

      // if the entire browser window was blurred, we don't want to show the tooltip