useScrollbarWidth.md

useScrollbarWidth

Hook that will return current browser's scrollbar width.
In case hook been called before DOM ready, it will return undefined and will cause re-render on first available RAF.

NOTE: it does not work (return 0) for mobile devices, because their scrollbar width can not be determined.

Usage

const Demo = () => {
  const sbw = useScrollbarWidth();

  return (
    <div>
      {sbw === undefined ? `DOM is not ready yet, SBW detection delayed` : `Browser's scrollbar width is ${sbw}px`}
    </div>
  );
};

Reference

const sbw: number | undefined = useScrollbarWidth();