{"id":21082507,"url":"https://github.com/code9g/modal","last_synced_at":"2026-01-25T21:21:24.288Z","repository":{"id":263667984,"uuid":"883000533","full_name":"code9g/modal","owner":"code9g","description":"Projet 14 de la formation \"Développeur JavaScript / React\" de OpenClassRooms (Partie composant)","archived":false,"fork":false,"pushed_at":"2024-11-05T13:05:29.000Z","size":62,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-18T02:42:36.994Z","etag":null,"topics":["component","npm","openclassrooms","react","school-project"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/code9g.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-04T07:47:14.000Z","updated_at":"2024-11-27T06:55:25.000Z","dependencies_parsed_at":"2024-11-19T20:14:23.260Z","dependency_job_id":"5c77c30e-6ea8-4f28-a40f-bc4175fb82af","html_url":"https://github.com/code9g/modal","commit_stats":null,"previous_names":["code9g/modal"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/code9g/modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code9g%2Fmodal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code9g%2Fmodal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code9g%2Fmodal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code9g%2Fmodal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code9g","download_url":"https://codeload.github.com/code9g/modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code9g%2Fmodal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28758930,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T20:56:06.009Z","status":"ssl_error","status_checked_at":"2026-01-25T20:54:48.203Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","npm","openclassrooms","react","school-project"],"created_at":"2024-11-19T20:14:20.029Z","updated_at":"2026-01-25T21:21:24.283Z","avatar_url":"https://github.com/code9g.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# code9g-modal\n\nA react component to create and customize modals.\n\n## Installation\n\nTo install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):\n\n```\nnpm i code9g-modal\n```\n\nor\n\n```\nyarn add code9g-modal\n```\n\n## Documentation\n\n- isOpen: Define is the modal is open or close\n- onOpen: Call function when the modal is opened\n- onClose: Call function when the modal is closed\n- onMouseOut: Call function when the mouse click on \"modal\" (not in element in children)\n- onEscape: Call function when the user use escape key\n- autoFocus: Define if the auto focus is used when the modal opening\n- focusTrap: Define if the tabulation stay in modal\n- openClass and closeClass: This class is used when modal is open or close (custom class)\n\n## Examples\n\n```jsx\nfunction App() {\n  let subtitle;\n  const [isOpen, setIsOpen] = useState(false);\n\n  const open = () =\u003e setIsOpen(true);\n  const close = () =\u003e setIsOpen(false);\n\n  const handleOpen = () =\u003e {\n    console.log(\"The modal opened !\");\n  };\n\n  const handleClose = () =\u003e {\n    console.log(\"The modal opened !\");\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton type=\"button\" onClick={open}\u003e\n        Open Modal\n      \u003c/button\u003e\n      \u003cModal\n        className=\"flex items-center justify-center bg-slate-500/25 transition-all duration-300\"\n        openClass=\"\"\n        closeClass=\"opacity-0\"\n        className=\"modal\"\n        isOpen={isOpen}\n        onOpen={handleOpen}\n        onClose={handleClose}\n        onMouseOut={close}\n        onEscape={close}\n        autoFocus\n        focustrap\n      \u003e\n        \u003cdiv\n          className={clsx(\n            \"relative w-1/3 rounded-xl bg-white p-10 shadow\",\n            \"transition-transform duration-300\",\n            !isOpen \u0026\u0026 \"-translate-y-full\"\n          )}\n        \u003e\n          \u003ch2\u003eHello\u003c/h2\u003e\n          \u003cform\u003e\n            \u003cinput type=\"text\" /\u003e\n            \u003cbutton type=\"button\"\u003eSubmit\u003c/button\u003e\n          \u003c/form\u003e\n          \u003cbutton type=\"button\" onClick={close}\u003e\n            Close\n          \u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/Modal\u003e\n    \u003c/div\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode9g%2Fmodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode9g%2Fmodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode9g%2Fmodal/lists"}