How to use the react-use/lib/useWindowSize function in react-use

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 () => {

export default function SectionNav(props) {
  const {y} = useScroll(props.mainRef)
  const {width, height} = useWindowSize()
  const [offsets, setOffsets] = useState([])

  const {contentRef, imagesLoaded} = props
  useEffect(() => {
    const headings = contentRef.current.querySelectorAll('h1, h2')
    setOffsets(
      Array.from(headings)
        .map(heading => {
          const anchor = heading.querySelector('a')
          if (!anchor) {
            return null
          }

          return {
            id: heading.id,
            offset: anchor.offsetTop

}) {
  function _onMouseDown() {
    onMouseDown(id);
  }
  function _onMouseUpClose() {
    onMouseUpClose(id);
  }
  function _onMouseUpMinimize() {
    onMouseUpMinimize(id);
  }
  function _onMouseUpMaximize() {
    if (resizable) onMouseUpMaximize(id);
  }
  const dragRef = useRef(null);
  const ref = useRef(null);
  const { width: windowWidth, height: windowHeight } = useWindowSize();
  const { offset, size } = useElementResize(ref, {
    dragRef,
    defaultOffset,
    defaultSize,
    boundary: {
      top: 1,
      right: windowWidth - 1,
      bottom: windowHeight - 31,
      left: 1,
    },
    resizable,
    resizeThreshold: 10,
  });
  let width, height, x, y;
  if (maximized) {
    width = windowWidth + 6;

export default function ProducerGlobe() {
  const state = useAsync(fetchPeers);
  const { width } = useWindowSize();
  const [theme] = useThemeMode();
  const [liveUpdate] = useLiveUpdate();
  const [activeMarkerId, setActiveMarker] = useState(null);

  useInterval(
    async () => {
      if (state.value) {
        const proposer = await fetchLatestProposer();
        setActiveMarker(proposer);
      }
    },
    liveUpdate ? 5000 : null
  );

  if (state.loading) {
    return ;

export default function SectionNav(props) {
  const mainRef = useContext(MainRefContext)
  const { y } = useScroll(mainRef)
  const { width, height } = useWindowSize()
  const [offsets, setOffsets] = useState([])

  const { contentRef, imagesLoaded } = props
  useEffect(() => {
    const headings = contentRef.current.querySelectorAll('h1, h2')
    setOffsets(
      Array.from(headings)
        .map(heading => {
          const anchor = heading.querySelector('a')
          if (!anchor) {
            return null
          }

          return {
            id: heading.id,
            offset: anchor.offsetTop,

function useMediaMode(): 'desktop' | 'mobile' {
  const { width } = useWindowSize();
  return width >= 640 ? 'desktop' : 'mobile'
}

function WindowVhSetter() {
  const { height } = useWindowSize()

  useEffect(() => {
    document.body.style.setProperty('--window-vh', `${height}px`)
  }, [height])

  return null
}

function useElementSize(ref) {
  const windowSize = useWindowSize()
  const [height, setHeight] = useState(0)
  const [width, setWidth] = useState(0)

  useLayoutEffect(() => {
    if (!ref.current) {
      return
    }
    const box = ref.current.getBoundingClientRect()
    setHeight(box.height)
    setWidth(box.width)
  }, [ref, windowSize.height, windowSize.width])

  return { width, height }
}

function Logo({ location }) {
  const [mode] = useThemeMode();
  const { width } = useWindowSize();
  const isHome = location.pathname === '/';

  return (
    
      <header>
        <div>
          <svg viewBox="0 0 35 40" height="40" width="35" xmlns="http://www.w3.org/2000/svg">
            <g fill="none">
              <path d="M-8-5h50v50H-8z"></path>
              </g></svg></div></header>