use-lock-body-scroll

Since: ver.12.5.0 as `useLockBodyScroll` 10.0.0 as `useBodyStyleModifications` A hook that blocks the document body from scrolling when active.

This is used in cases where a popup or other modal-like component is currently active and demands the user focus by blocking interactions with the content beneath the modal.

import { Heading, Button, Box, useLockBodyScroll } from '@flixbus/honeycomb-react';

const modalRef = React.useRef();
const [active, setActive] = React.useState(false);

useLockBodyScroll(active);

const openModal = () => {
  setActive(true);
  modalRef.current.showModal();
};

const closeModal = () => {
  setActive(false);
  modalRef.current.close();
};

<>
  <Box>
    <Button onClick={openModal}>
      Open modal
    </Button>
  </Box>
  {[1, 2, 3, 4, 5, 6, 7].map((index) => (
    <Box key={index} appearance={(index % 2) ? 'success' : 'danger'} style={{ height: '10vh' }}>Some content</Box>
  ))}
  <dialog ref={modalRef}>
    <Button onClick={closeModal}>
      Close modal
    </Button>
  </dialog>
</>
import { Heading, Button, Box, useLockBodyScroll } from '@flixbus/honeycomb-react';

const modalRef = React.useRef();
const [active, setActive] = React.useState(false);

useLockBodyScroll(active);

const openModal = () => {
  setActive(true);
  modalRef.current.showModal();
};

const closeModal = () => {
  setActive(false);
  modalRef.current.close();
};

<>
  <Box>
    <Button onClick={openModal}>
      Open modal
    </Button>
  </Box>
  {[1, 2, 3, 4, 5, 6, 7].map((index) => (
    <Box key={index} appearance={(index % 2) ? 'success' : 'danger'} style={{ height: '10vh' }}>Some content</Box>
  ))}
  <dialog ref={modalRef}>
    <Button onClick={closeModal}>
      Close modal
    </Button>
  </dialog>
</>