react-modal-sheet
react-modal-sheet copied to clipboard
Sheet not opening in `StrictMode`
I am trying this module in my page. However, I cannot see the sheet in view because we set transform value is css. Also, we do not have this behavior in the release environment (I deployed my website through GCP).
One more interesting thing is if I zoom in and out by cmd +/-, then I can see the sheet rendering in view when I am in development mode.
Is this a known issue of this module? Or is there any workaround to prevent this issue? Thank you.
CODE: 'use client'; import { Sheet } from 'react-modal-sheet'; import { useState } from 'react';
export default function Container() {
const [isOpen, setOpen] = useState(false);
return (
<div>
<div>this is container</div>
<button onClick={() => setOpen(true)}>Open sheet</button>
<Sheet
isOpen={isOpen}
onClose={() => setOpen(false)}
snapPoints={[-50, 0.5, 200, 0]}
initialSnap={1}
>
<Sheet.Container>
<Sheet.Header />
<Sheet.Content>
<div style={{ 'color': 'black' }}>We will have product content here</div>
</Sheet.Content>
</Sheet.Container>
<Sheet.Backdrop />
</Sheet>
</div>
)
}