How to use react-use - 10 common examples

console.error(e); // eslint-disable-line no-console
          setError(e);
          return;
        }
        setError(null);
      }}
      editorDidMount={instance => {
        cmInstance.current = instance;
      }}
    />
  );

  const fileExtension =
    relativePath.split('.')[relativePath.split('.').length - 1] || 'js';

  const isWide = useMedia('(min-width: 767.99px)', true);

  return (
    <div>
      
        <div>
          {error ? (
            </div></div>

function Metrics({ theme, sparkline, itemSize, size }) {
  const state = useAsync(sparkline ? fetchBoth : fetchLatest);
  const [updates, setUpdates] = useState(null);
  const [liveUpdate, setLiveUpdate] = useLiveUpdate();
  const [animation, setAnimation] = useBoolean(false);
  const [token] = useTokenInfo();

  // Pull
  useInterval(
    async () => {
      try {
        let res = null;
        if (sparkline) {
          res = await fetchBoth();
        } else {
          res = await fetchLatest();
        }
        setUpdates(res);

function PaginatedList({ args, pageSize, pageLink, dataKey, dataLoaderFn, dataRenderFn }) {
  const [cursor, setCursor] = useState(null);

  // eslint-disable-next-line
  const fetchList = async (args, size, cur = null) => {
    const params = { ...args, paging: { size: size || 10 } };
    if (cur) {
      params.paging.cursor = cur;
    }

    const res = await dataLoaderFn(params);

    return res;
  };

  const state = useAsync(async () => fetchList(args, pageSize, cursor), [args, pageSize, cursor]);

  if (state.error) {
    console.error(state.error);
  }

  if (state.loading) {
    return (
      
        
      
    );
  }

  if (state.error) {
    return (

window.r = tableContainer.current;
    let _ = {
      width: tableContainer.current.clientWidth,
      height: tableContainer.current.clientHeight - 79
    };
    console.log(_);
    setTSize(_);
  };

  // console.log(tSize);

  // useMount(() => setTimeout(tableResize, 500));

  const [editDash, toggleDashEdit] = useToggle(false);
  const [showReadme, toggleReadme] = useToggle(false);
  const [editReadme, toggleReadmeEdit] = useToggle(false);
  const [showParallelCoord, toggleParallelCoord] = useToggle(false);

  const updateDashConfigText = debounce(1000, (id, text) => {
    if (!id)
      id = toGlobalId("File", directory.path + "/default.dashcfg");
    updateText(id, text);
  });

  const updateReadme = debounce(1000, (id, text) => {
    if (!id)
      id = toGlobalId("File", directory.path + "/README.md");
    updateText(id, text);
  });

  const {files, fullExperiments, readme, dashConfigs: dC} = directory;

function attachCopyFileButton() {
      if (configContext.val.copyFileButton) return DOMHelper.attachCopyFileBtn() || undefined // for the sake of react effect
    },
    [configContext.val.copyFileButton],
  )
  React.useEffect(attachCopyFileButton, [configContext.val.copyFileButton])
  useEvent('pjax:complete', attachCopyFileButton, window)

  const attachCopySnippetButton = React.useCallback(
    function attachCopySnippetButton() {
      if (configContext.val.copySnippetButton) return DOMHelper.attachCopySnippet() || undefined // for the sake of react effect
    },
    [configContext.val.copySnippetButton],
  )
  React.useEffect(attachCopySnippetButton, [configContext.val.copySnippetButton])
  useEvent('pjax:complete', attachCopySnippetButton, window)

  // init again when setting new accessToken
  useDidUpdate(() => {
    props.init()
  }, [accessToken])

  const {
    errorDueToAuth,
    metaData,
    treeData,
    baseSize,
    error,
    shouldShow,
    showSettings,
    logoContainerElement,
    toggleShowSideBar,

}),
        )
      }
    },
    [props.metaData?.branchName, configContext.val.intelligentToggle],
  )
  useEvent('pjax:complete', updateSideBarVisibility, window)

  const attachCopyFileButton = React.useCallback(
    function attachCopyFileButton() {
      if (configContext.val.copyFileButton) return DOMHelper.attachCopyFileBtn() || undefined // for the sake of react effect
    },
    [configContext.val.copyFileButton],
  )
  React.useEffect(attachCopyFileButton, [configContext.val.copyFileButton])
  useEvent('pjax:complete', attachCopyFileButton, window)

  const attachCopySnippetButton = React.useCallback(
    function attachCopySnippetButton() {
      if (configContext.val.copySnippetButton) return DOMHelper.attachCopySnippet() || undefined // for the sake of react effect
    },
    [configContext.val.copySnippetButton],
  )
  React.useEffect(attachCopySnippetButton, [configContext.val.copySnippetButton])
  useEvent('pjax:complete', attachCopySnippetButton, window)

  // init again when setting new accessToken
  useDidUpdate(() => {
    props.init()
  }, [accessToken])

  const {

export default function DocsetSwitcher(props) {
  const menuRef = useRef(null);
  const {width} = useWindowSize();
  useKey('Escape', props.onClose);

  useEffect(() => {
    if (props.open) {
      // focus the menu after it has been transitioned in
      setTimeout(() => {
        menuRef.current.focus();
      }, transitionDuration);
    }
  }, [props.open]);

  const {current} = props.buttonRef;
  const menuStyles = useMemo(() => {
    if (!current) {
      return null;
    }

function ChatWidget(props: Props) {
  const auth = useAuth()
  const [state, dispatch] = useReducer(reducer, init)
  const { height } = useWindowSize()
  const [hasUnreadMessages, setHasUnreadMessages] = useState(false)
  const chatbarRef = useRef(null)
  const idleAudioRef = useRef(null)
  const sendAudioRef = useRef(null)
  const buttonRef = useRef(null)
  // One-off flag used to check if we're supposed to scroll to the bottom
  const shouldScrollToBottomRef = useRef(true)
  // The last stored scroll distance from the bottom of our chat list container
  // We want to update when then the user scrolls the container or the container size changes.
  const lastScrollDistanceFromBottom = useRef(0)
  // One-off flag used to check if it's a message sent through pusher
  const isReceivingRef = useRef(true)
  const isSubmittable = state.message.text.trimRight().trimLeft().length > 0

  useAsyncEffect(
    async () => {

React.useEffect(() => {
    // Make sure our index stays in bounds with max templateInfos

    const totalCount = getTotalTemplateCount();

    if (focusedTemplateIndex >= totalCount || focusedTemplateIndex < 0) {
      safeSetFocusedTemplate(i => i);
    }

    // We only want this check to happen if templateInfos changes. Only then we
    // can get our index out of bounds
    // eslint-disable-next-line
  }, [templateInfos]);

  useKey(
    'ArrowRight',
    evt => {
      evt.preventDefault();
      safeSetFocusedTemplate(i => i + 1);
    },
    {},
    [safeSetFocusedTemplate]
  );

  useKey(
    'ArrowLeft',
    evt => {
      evt.preventDefault();
      safeSetFocusedTemplate(i => i - 1);
    },
    {},

// We only want this check to happen if templateInfos changes. Only then we
    // can get our index out of bounds
    // eslint-disable-next-line
  }, [templateInfos]);

  useKey(
    'ArrowRight',
    evt => {
      evt.preventDefault();
      safeSetFocusedTemplate(i => i + 1);
    },
    {},
    [safeSetFocusedTemplate]
  );

  useKey(
    'ArrowLeft',
    evt => {
      evt.preventDefault();
      safeSetFocusedTemplate(i => i - 1);
    },
    {},
    [safeSetFocusedTemplate]
  );

  useKey(
    'ArrowDown',
    evt => {
      evt.preventDefault();
      const { templateInfo, offset } = getTemplateInfoByIndex(
        focusedTemplateIndex
      );