A tiny library to block the scrollbar of the body element ✨

Live demo

Live Demo

Installation

Install

npm i scrollbar-block@latest

Use

import React, { useEffect, useState } from 'react';
import { scrollbarBlock } from 'scrollbar-block';

function Modal({ open, children }) {
  const dialogRef = React.useRef(null);
  const unlockScrollbars = React.useRef(null);

  useEffect(() => {
    const dialogNode = dialogRef.current;
    if (dialogNode) {
      if (open) {
        dialogNode.showModal();
        unlockScrollbars.current = lockScrollbars();
      } else {
        dialogNode.close();
        unlockScrollbars.current?.();
      }
    }
  }, [open]);

  return <dialog ref={dialogRef}>{children}</dialog>;
}

About

Gia Hung – hung.hg