'use client'; import { Modal } from '@shinyongjun/react-modal'; import '@shinyongjun/react-modal/css'; import { useState } from 'react'; export default function App() { const [show, setShow] = useState<boolean>(false); return ( <div> <button type="button" onClick={() => setShow(true)}> Open Modal </button> {show && ( <Modal> <div> <p>Modal Example</p> <button type="button" onClick={() => setShow(false)}> Close Modal </button> </div> </Modal> )} </div> ); }
'use client'; import { Modal } from '@shinyongjun/react-modal'; import '@shinyongjun/react-modal/css'; import { useState } from 'react'; export default function App() { const [show, setShow] = useState<boolean>(false); return ( <div> <button type="button" onClick={() => setShow(true)}> Open Modal </button> {show && ( <Modal className="custom1"> <div> <p>Modal Example</p> <button type="button" onClick={() => setShow(false)}> Close Modal </button> </div> </Modal> )} </div> ); }
.react-modal__wrapper.custom1 { // Before Styles background-color: rgba(0, 0, 0, 0); transition: background-color 300ms; .react-modal__modalbox { opacity: 0; transform: scale(0.8); transition: all 300ms; } // After Styles &[data-active='true'] { background-color: rgba(0, 0, 0, 0.5); .react-modal__modalbox { opacity: 1; transform: scale(1); } } }
'use client'; import { Modal } from '@shinyongjun/react-modal'; import '@shinyongjun/react-modal/css'; import { useState } from 'react'; export default function App() { const [show, setShow] = useState<boolean>(false); return ( <div> <button type="button" onClick={() => setShow(true)}> Open Modal </button> {show && ( <Modal onBackgroundClick={() => setShow(false)}> <div> <p>onBackgroundClick Example</p> <button type="button" onClick={() => setShow(false)}> Close Modal </button> </div> </Modal> )} </div> ); }