{"id":23162761,"url":"https://github.com/oth21dev/oxanatheis_14_15092022_modal","last_synced_at":"2026-04-02T02:50:28.814Z","repository":{"id":59591185,"uuid":"537103744","full_name":"OTH21DEV/OxanaTheis_14_15092022_modal","owner":"OTH21DEV","description":":sparkles: Modal - pop up plugin developped  in React and published in npmjs.com","archived":false,"fork":false,"pushed_at":"2023-01-02T06:39:32.000Z","size":205,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T10:45:01.368Z","etag":null,"topics":["accessibility","css3","dialog","html5","javascript","keyboard-navigation","modal","npm-package","npm-publish","popup","react"],"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/OTH21DEV.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}},"created_at":"2022-09-15T16:02:26.000Z","updated_at":"2023-01-01T11:20:28.000Z","dependencies_parsed_at":"2023-02-01T02:01:11.363Z","dependency_job_id":null,"html_url":"https://github.com/OTH21DEV/OxanaTheis_14_15092022_modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OTH21DEV%2FOxanaTheis_14_15092022_modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OTH21DEV%2FOxanaTheis_14_15092022_modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OTH21DEV%2FOxanaTheis_14_15092022_modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OTH21DEV%2FOxanaTheis_14_15092022_modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OTH21DEV","download_url":"https://codeload.github.com/OTH21DEV/OxanaTheis_14_15092022_modal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247248972,"owners_count":20908202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["accessibility","css3","dialog","html5","javascript","keyboard-navigation","modal","npm-package","npm-publish","popup","react"],"created_at":"2024-12-18T00:13:29.931Z","updated_at":"2025-12-30T20:26:06.215Z","avatar_url":"https://github.com/OTH21DEV.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![MADE WITH - JAVASCRIPT](https://img.shields.io/badge/MADE_WITH-JAVASCRIPT-1D75C2?style=for-the-badge)](https://) [![STYLED - CSS](https://img.shields.io/badge/STYLED-CSS-E034BE?style=for-the-badge)](https://) ![BUILT WITH - REACT](https://img.shields.io/badge/BUILT_WITH-REACT-4F28B0?style=for-the-badge) \n\n\n\n# Modal app - pop up plugin \n\nThis project is a React plugin allowing to display an alert in other words a pop up information. \u003cbr /\u003eContains a smoth animation while appear on the screen and can be controlled by keyboard.\n\n\n## NPM link \nhttps://www.npmjs.com/package/react-modal-oth\n\n## Installation\n\n$ npm i react-modal-oth\u003cbr /\u003e\n$ yarn add react-modal-oth\n\n\n## How the plugin works\n\n- Import module : \n```\nimport Modal from \"react-modal-oth\";\n```\n\n- Create your state in your component:\n```\nconst [modalIsOpen, setModalIsOpen] = useState(true);\n```\n\n- Render your Modal in your component:\n\n```\nreturn \u003cModal icon={icon} closeIcon={close_icon} show={modalIsOpen} setShow={setModalIsOpen} title={\"Well done!\"} text={\"Employee was successfully created!\"} /\u003e;\n```\n\n### ```\u003cModal/\u003e params:```\n\n- icon : svg component used in the Modal (decoration purpose).\u003cbr /\u003e\nImport the svg component as:\n```\nimport icon from \"react-modal-oth/dist/assets/icon.svg\";\n```\n\n- closeIcon : svg component used in the Modal - close icon.\u003cbr /\u003e\nImport the svg component as:\n```\nimport close_icon from \"react-modal-oth/dist/assets/close.svg\";\n```\n- show : Boolean state use to show and hide the Modal \n- setShow : function that updates the state\n- title : Modal heading\n- text: additional text information \n\n## Example\n\n```\nimport \"./style.css\";\n\nconst Modal = ({ icon, closeIcon, show, setShow, title, text }) =\u003e {\n\n  const handleKeydown = useCallback((e) =\u003e {\n    if (e.type === \"click\" || e.key === \"Escape\" || e.key === \"Enter\") {\n      setShow(false);\n    }\n  }, []);\n\n  useEffect(() =\u003e {\n    document.addEventListener(\"keydown\", handleKeydown);\n\n    return () =\u003e {\n      document.removeEventListener(\"keydown\", handleKeydown);\n    };\n  }, []);\n\n  return (\n    show \u0026\u0026 (\n      \u003c\u003e\n        \u003cdiv className=\"wrapper-modal\"\u003e\n          \u003cdiv className=\"modal\"\u003e\n            \u003cdiv className=\"modal-icon\"\u003e\n              \u003cimg src={icon} alt=\"\" /\u003e\n            \u003c/div\u003e\n            \u003cimg className=\"modal-close-icon\" src={closeIcon} alt=\"\" onKeyPress={(e) =\u003e handleKeydown(e)} onClick={(e) =\u003e handleKeydown(e)}\u003e\u003c/img\u003e\n            \u003ch1 className=\"modal__title\"\u003e{title}\u003c/h1\u003e\n            \u003cp className=\"modal__text\"\u003e{text}\u003c/p\u003e\n            \u003cdiv className=\"wrapper-btn\"\u003e\n              \u003cbutton type=\"button\" className=\"btn\" onClick={(e) =\u003e handleKeydown(e)}\u003e\n                OK{\" \"}\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/\u003e\n    )\n  );\n};\n```\n\n\n\n![modal](https://user-images.githubusercontent.com/81259062/190851870-c1d58c7e-98a0-45bc-8dd1-b5f760946756.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foth21dev%2Foxanatheis_14_15092022_modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foth21dev%2Foxanatheis_14_15092022_modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foth21dev%2Foxanatheis_14_15092022_modal/lists"}