Stop scrolling on modal (#39)

Co-authored-by: Szymon Szlachtowicz <szymon.szlachtowicz@Szymons-MacBook-Pro.local>
This commit is contained in:
Szymon Szlachtowicz 2021-06-17 09:41:00 +02:00 committed by GitHub
parent 3cd6d60188
commit 371864a4f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 1 deletions

View File

@ -1,4 +1,4 @@
import React, { ReactNode } from 'react' import React, { ReactNode, useEffect } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { Colors } from '../constants/styles' import { Colors } from '../constants/styles'
import closeIcon from '../assets/images/close.svg' import closeIcon from '../assets/images/close.svg'
@ -10,6 +10,12 @@ type ModalProps = {
} }
export function Modal({ heading, children, setShowModal }: ModalProps) { export function Modal({ heading, children, setShowModal }: ModalProps) {
useEffect(() => {
document.body.style.overflow = 'hidden'
return () => {
document.body.style.overflow = 'unset'
}
}, [])
return ( return (
<PopUpOverlay onClick={() => setShowModal(false)}> <PopUpOverlay onClick={() => setShowModal(false)}>
<PopUpWindow onClick={(e) => e.stopPropagation()}> <PopUpWindow onClick={(e) => e.stopPropagation()}>