react-use/docs/useScrollbarWidth.md
Anton Zinovyev 125c7e96a1
feat: useScrollbarWidth hook; (#825)
* feat: useScrollbarWidth hook;

* chore: bump @xobotyi/scrollbar-width to 1.5.0 and add it to dependencies.

* fix: remove @xobotyi/scrollbar-width from dev-deps.
2019-12-09 15:47:44 +03:00

637 B

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();