{"_id":"@ashleysyheo/react-modal","_rev":"2-89899a150069d22842eb18a6e66ef7d7","name":"@ashleysyheo/react-modal","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.0":{"name":"@ashleysyheo/react-modal","version":"0.0.0","private":false,"description":"Responsive modal dialog component for React","module":"dist/index.js","main":"dist/index.js","browser":"./browser/specific/main.js","types":"dist/index.d.ts","author":{"name":"Ashley Heo","email":"ashleysyheo@gmail.com"},"keywords":["react","typescript","react-component","modal","dialog"],"repository":{"type":"git","url":"git+https://github.com/ashleysyheo/react-modal.git"},"license":"MIT","scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","publish:npm":"rm -rf dist && mkdir dist && tsc && cp ./src/lib/style.module.css ./dist"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","typescript":"^4.9.5"},"devDependencies":{"@babel/cli":"^7.21.5","@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","@types/jest":"^27.5.2","@types/node":"^16.18.25","@types/react":"^18.2.0","@types/react-dom":"^18.2.1","cross-env":"^7.0.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"1283a2e9a83f995488c3aa411bcf544f31645aad","bugs":{"url":"https://github.com/ashleysyheo/react-modal/issues"},"homepage":"https://github.com/ashleysyheo/react-modal#readme","_id":"@ashleysyheo/react-modal@0.0.0","_nodeVersion":"20.0.0","_npmVersion":"9.6.4","dist":{"integrity":"sha512-a+2zlcreKV6vLxDy9yq3SejnriHzsS8T0WXwnPG8Cu/bm0GnjkucGxDqJ/jM2Pxadr72PDudS8V4/KQKLxILvQ==","shasum":"0862ab56237062e3d416a3464aa5e145ef00acd8","tarball":"https://registry.npmjs.org/@ashleysyheo/react-modal/-/react-modal-0.0.0.tgz","fileCount":14,"unpackedSize":13418,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE0tie9AAk/5xi6Q8E2KHMUN1otfu4mLEDvEX0TbHIbqAiEAx6dKKmiJrt2pB5NQwJ4esL9uKtGO1NVtc4i+d2RCz1k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnKxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5Iw/+J02gZjkT8lVeks8U5bW/HzYCkmGobYgbofpGWW9fwpkDclYx\r\n53dpqmtx7Ha6cdBa3rFC1lwFdn56ldWr+mx6xiMX2k/iMsXevbfkh0URA+2d\r\nzQgBx95+5sHL8AqyHguZZfmLUNe3OSA/YjD/8a7eNcRTFUlhhF4J4rJoRazK\r\n7C3ULqR6U3ZWrrVE7P49QW81org5eJJqJh5d5J1SkwLYfg2CdTRm8iRqduJW\r\nFpwN6UNVXbwPDz0benm7VnkLUgWKqzA6kF0y+tDWm63NZgPoIYwwI1+0+XK6\r\noITMTWOpPGacrU5FIzaqZgODqF2UD6vl5Zl3aFRfRK9/xlJxyikcr3GFmhiO\r\nRQZ5K6WhDq3echNTtTbQwU4xoe/9skKdMrS3PRZPJjtGmKilZjeKPKXXwiHK\r\n0b2p6pVivc4+DMxY4M5zMtveRwEc0hSsrh2G4HpOxAVk94tR9hudbMEPokit\r\n5osVRifxpAe7nXgolyLdrW9jaZBddtFKkhDt8TJYqPL41jeAGDLSS+c1t3i7\r\nTAHE8lt1GdvGCIH0m3rUrPa6HolEgzY4PTLuakIbTleT1yn0LfNh8T8CBUhP\r\nALEX0TH6PRr2SIfqcuuI4p4uI3jAZbfyPlvEEvAy2HRgOE+sigcDLig+/BJi\r\nw6MKIjaYhWEb6bduFCP7MBAOpbDp7dovzBo=\r\n=tg07\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ashleysyheo","email":"ashleysyheo@gmail.com"},"directories":{},"maintainers":[{"name":"ashleysyheo","email":"ashleysyheo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-modal_0.0.0_1683124913172_0.014731736278960295"},"_hasShrinkwrap":false},"0.0.1":{"name":"@ashleysyheo/react-modal","version":"0.0.1","private":false,"description":"Responsive modal dialog component for React","module":"dist/index.js","main":"dist/index.js","browser":"./browser/specific/main.js","types":"dist/index.d.ts","author":{"name":"Ashley Heo","email":"ashleysyheo@gmail.com"},"keywords":["react","typescript","react-component","modal","dialog"],"repository":{"type":"git","url":"git+https://github.com/ashleysyheo/react-modal.git"},"license":"MIT","scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","publish:npm":"rm -rf dist && mkdir dist && tsc && cp ./src/lib/style.module.css ./dist"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","typescript":"^4.9.5"},"devDependencies":{"@babel/cli":"^7.21.5","@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","@types/jest":"^27.5.2","@types/node":"^16.18.25","@types/react":"^18.2.0","@types/react-dom":"^18.2.1","cross-env":"^7.0.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"6679956bf09112792dc35f94b7102dcdf1b8a104","bugs":{"url":"https://github.com/ashleysyheo/react-modal/issues"},"homepage":"https://github.com/ashleysyheo/react-modal#readme","_id":"@ashleysyheo/react-modal@0.0.1","_nodeVersion":"20.0.0","_npmVersion":"9.6.4","dist":{"integrity":"sha512-Cl9R1PqlWmjjzwnkEGWtlx4aqKDF3VK19LqLusTmSJOqQ/3BfYwhBB5eZXpcilJDnvkssXTdARmEi6OV1NzlMA==","shasum":"5532b18a2b90ab78c1b2406b600654cbd282c988","tarball":"https://registry.npmjs.org/@ashleysyheo/react-modal/-/react-modal-0.0.1.tgz","fileCount":14,"unpackedSize":13580,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6V40EuCIKLBihw+/MkJaS0wjfm/uEbkK0C5RJFwkjJAiEAgqDoR1kP0L6yJu+epVYieUQjgJ21RKwtc9Cemy9CRd4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnW+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYGA//V32lxrfjBsVH2DwrHiBpHOQG+Zj/TBrHN2IBASFKHUYM/mrs\r\n82X9gZfvBURucFNlp2xmPRbA+P5SweULLRX6dCrsjWOoqLff2K8BguKDFH4G\r\nW3fyryWeBQUsLDMkVbAgfgc7Zyv5buigMLrXljAxq3XGDJFe4zVsi50aS/Fu\r\n2vUCU+ggzS9e+cdenPLKbsWsm6Y6gGdgVOGbR9pz/UaqXlIO2RCrXycrSpDZ\r\nM00gUVtXr5bjIp31p5c4uNmDWc5zNJUhPOerXsLdAG75/+KJuwARAZaazW5V\r\nUf4NZB0mOgeT5ySiNmuZ2ebE0/GgQdZGqBajCh3kCI1SU6K2+5M8MTSfODkW\r\nf7034ePKAt2LAjto9K+lL+x0ZMYGsh5qAYw0GJ2xA9uewguCoK2WSxZvNLvz\r\n4ZU/5FwukCaZgHcK0sZO/P6A95CGZo063AVgIetjKlGyGq6axS2JMseQw6QZ\r\nZaxxTuWYgE2q8sYB0/N9nlWTUuJBc6UH4PT+OeGN9qHgrRyEozAFGvT+KgiL\r\nvTs5SJex71arjYpwJ76fxNLSzUdoxUXQuFMkQ2pXhhzQnQHJIGEgxl3NieRu\r\nRIaEXMQH+GEX2ejDQjQTy4KXjHPb1Szt2s3mq8ihB36l4naVA6pDjzX4R10e\r\nAVCYmrX7THVV3SNLgIzycrq8oquJcyE7fno=\r\n=5LxN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ashleysyheo","email":"ashleysyheo@gmail.com"},"directories":{},"maintainers":[{"name":"ashleysyheo","email":"ashleysyheo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-modal_0.0.1_1683125694649_0.2770680074362133"},"_hasShrinkwrap":false},"1.0.0":{"name":"@ashleysyheo/react-modal","version":"1.0.0","private":false,"description":"Responsive modal dialog component for React","module":"dist/index.js","main":"dist/index.js","browser":"./browser/specific/main.js","types":"dist/index.d.ts","author":{"name":"Ashley Heo","email":"ashleysyheo@gmail.com"},"keywords":["react","typescript","react-component","modal","dialog"],"repository":{"type":"git","url":"git+https://github.com/ashleysyheo/react-modal.git"},"license":"MIT","scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","publish:npm":"rm -rf dist && mkdir dist && tsc && cp ./src/lib/style.module.css ./dist"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","typescript":"^4.9.5"},"devDependencies":{"@babel/cli":"^7.21.5","@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","@types/jest":"^27.5.2","@types/node":"^16.18.25","@types/react":"^18.2.0","@types/react-dom":"^18.2.1","cross-env":"^7.0.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"b3aa3bb38c3a27683e4ff42655dc847e88c3158b","bugs":{"url":"https://github.com/ashleysyheo/react-modal/issues"},"homepage":"https://github.com/ashleysyheo/react-modal#readme","_id":"@ashleysyheo/react-modal@1.0.0","_nodeVersion":"20.0.0","_npmVersion":"9.6.4","dist":{"integrity":"sha512-sJVzThESmL+J0aLwTzJZxLaYNlXysSzHZckOBqlxQZRV7szQOQCODcHM2DhU6SznSY4HM0r7Whuc5vylCpQKVg==","shasum":"3d47b8e4bddc56ae955a459f383334bdb97d4832","tarball":"https://registry.npmjs.org/@ashleysyheo/react-modal/-/react-modal-1.0.0.tgz","fileCount":14,"unpackedSize":13580,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQO0DDN4cUl0/JHqZaAuhYEpXSwNzD0wzsB2uWWmk3uAiEAlM+RIdiCPHI2W5F1UmjQPecefs5mwLek66hdy7bXpOc="}]},"_npmUser":{"name":"ashleysyheo","email":"ashleysyheo@gmail.com"},"directories":{},"maintainers":[{"name":"ashleysyheo","email":"ashleysyheo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-modal_1.0.0_1683528882413_0.2326351533861859"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-03T14:41:53.119Z","0.0.0":"2023-05-03T14:41:53.327Z","modified":"2023-05-08T06:54:42.677Z","0.0.1":"2023-05-03T14:54:54.828Z","1.0.0":"2023-05-08T06:54:42.573Z"},"maintainers":[{"name":"ashleysyheo","email":"ashleysyheo@gmail.com"}],"description":"Responsive modal dialog component for React","homepage":"https://github.com/ashleysyheo/react-modal#readme","keywords":["react","typescript","react-component","modal","dialog"],"repository":{"type":"git","url":"git+https://github.com/ashleysyheo/react-modal.git"},"author":{"name":"Ashley Heo","email":"ashleysyheo@gmail.com"},"bugs":{"url":"https://github.com/ashleysyheo/react-modal/issues"},"license":"MIT","readme":"# React Modal\n\n간단한 모달을 구현할 수 있는 리액트 라이브러리입니다.\n\n## 설치 방법\n\n```sh\n$ npm install @ashleysyheo/react-modal\n$ yarn add @ashleysyheo/react-modal\n```\n\n## API Documentation\n\n`ModalProvider`: 모달 컨텍스트를 제공하는 컴포넌트\n\n`Modal`: 모달 창을 보여주기 위한 모달 컴포넌트\n\n`useModalContext`: 모달 컨텍스트를 가져오는 커스텀 훅\n\n- `isModalOpen`: 모달의 열림 상태를 알려주는 `boolean` 값\n\n- `isModalClosed`: 모달의 닫힘(한번 열린 후 닫힌) 상태를 알려주는 `boolean` 값\n\n- `openModal`: 모달을 여는 함수\n\n- `closeModal`: 모달을 닫는 함수\n\n## 사용 방법\n\n### Setup\n\n라이브러리를 사용하기 위해서 다음과 같이 `ModalProvider`로 앱을 감싸주세요:\n\n```tsx\nimport { ModalProvider } from '@ashleysyheo/react-test-modal';\n\nconst App = () => {\n  return (\n    <ModalProvider>\n      <div className=\"App\">{/* ... Rest of your app */}</div>\n    </ModalProvider>\n  );\n};\n```\n\n### Modal 사용 방법\n\n```js\nimport { Modal } from '@ashleysyheo/react-test-modal';\n\n<Modal>{/* ReactNode 형태의 children을 전달 */}</Modal>;\n```\n\n## Props\n\n### children\n\n- 모달 내부에 들어갈 내용입니다.\n- React Node 형태로 전달합니다.\n\n## Modal 사용 예시\n\n```tsx\nimport { useEffect, useState } from 'react';\nimport { Modal, useModalContext } from '@ashleysyheo/react-test-modal';\n\nconst MyComponent = () => {\n  const { isModalOpen, isModalClosed, openModal, closeModal } = useModalContext();\n  const [value, setValue] = useState('클릭해서 모달을 열어 보세요!');\n\n  useEffect(() => {\n    if (isModalClosed) setValue('모달이 좀 전에 닫혔어요');\n\n    if (isModalOpen) setValue('모달이 열려있어요');\n  }, [isModalOpen, isModalClosed]);\n\n  return (\n    <div className=\"App\">\n      <h3>{value}</h3>\n      <button onClick={openModal}>Open Modal</button>\n      {isModalOpen && (\n        <Modal>\n          <h3>용비어천가</h3>\n          <div>\n            해동의 여섯 용이 날으사, 일마다 천복이시니,\n            옛 성인들과 부절을 합친 듯 꼭 맞으시니.\n            뿌리 깊은 나무는 바람에 아니 흔들리므로, 꽃 좋고 열매 많으니\n            샘이 깊은 물은 가뭄에 아니 그치므로, 내가 되어 바다에 가나니.\n          </div>\n          <button onClick={closeModal}>Close</button>\n        </Modal>\n      )}\n    </div>\n  );\n}\n</MyModal>\n```\n\n<br>\n\n[![Edit @ashleysyheo/react-modal](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/ashleysyheo-react-modal-dzdd3k)\n","readmeFilename":"README.md"}