## React useBodyScrollLock Hook > `index.html` et `script.js` ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à `script.js` et `style.css`. Ce fragment de code permet aux utilisateurs de bloquer le défilement du corps lorsqu'un modal est ouvert. Voici comment cela fonctionne : Tout d'abord, la fonction `useBodyScrollLock` est définie, qui utilise le hook `useLayoutEffect` pour bloquer le défilement de l'élément `body`. Ce hook s'exécute une seule fois lors du montage du composant, et il définit la valeur de `overflow` de l'élément `body` sur `'hidden'`. Lorsque le composant est démonté, la valeur d'`overflow` d'origine est restaurée. ```jsx const useBodyScrollLock = () => { React.useLayoutEffect(() => { const originalStyle = window.getComputedStyle(document.body).overflow; document.body.style.overflow = "hidden"; return () => (document.body.style.overflow = originalStyle); }, []); }; ``` Ensuite, le composant `Modal` est défini, qui utilise la fonction `useBodyScrollLock`. Ce composant affiche un message dans une boîte centrée sur l'écran. Lorsque la boîte est cliquée, le modal est fermé et le défilement du corps est débloqué. ```jsx const Modal = ({ onClose }) => { useBodyScrollLock(); return (

Scroll bloqué!
Cliquez sur moi pour le débloquer

); }; ``` Enfin, le composant `MyApp` est défini, qui affiche un bouton qui ouvre le composant `Modal` lorsqu'il est cliqué. ```jsx const MyApp = () => { const [modalOpen, setModalOpen] = React.useState(false); return (

{modalOpen && setModalOpen(false)} />}

); }; ReactDOM.createRoot(document.getElementById("root")).render(); ``` Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet **Web 8080** pour prévisualiser la page web.