{"id":21379126,"url":"https://github.com/creative-tutorials/react-modal-component","last_synced_at":"2026-04-09T02:03:54.505Z","repository":{"id":171758432,"uuid":"648377567","full_name":"creative-tutorials/react-modal-component","owner":"creative-tutorials","description":"A react modal popup slide component","archived":false,"fork":false,"pushed_at":"2023-06-02T10:18:05.000Z","size":28,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-29T22:45:54.004Z","etag":null,"topics":["component","css","daisyui","modal","modal-dialogs","popups","react","slider","tailwindcss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/devtreasure-react-modal-component","language":"TypeScript","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/creative-tutorials.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":"2023-06-01T20:42:20.000Z","updated_at":"2023-06-02T09:18:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"e96a4be9-2292-43fb-a77b-32bbd7be21b2","html_url":"https://github.com/creative-tutorials/react-modal-component","commit_stats":null,"previous_names":["creative-tutorials/react-modal-component"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/creative-tutorials/react-modal-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creative-tutorials%2Freact-modal-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creative-tutorials%2Freact-modal-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creative-tutorials%2Freact-modal-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creative-tutorials%2Freact-modal-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/creative-tutorials","download_url":"https://codeload.github.com/creative-tutorials/react-modal-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creative-tutorials%2Freact-modal-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262898598,"owners_count":23381600,"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":["component","css","daisyui","modal","modal-dialogs","popups","react","slider","tailwindcss"],"created_at":"2024-11-22T10:17:21.673Z","updated_at":"2025-12-30T22:11:33.246Z","avatar_url":"https://github.com/creative-tutorials.png","language":"TypeScript","readme":"# react-modal-component\n\nTo begin using this package, follow these steps:\n\n- Step1: Go to the `node_modules` folder in your project and locate the folder named `devtreasure-react-modal-component`. Inside that folder, copy the `modal.tsx` file from the src folder. For the styles, copy the `modal.module.css` file from the styles folder.\n\n- Step2: Paste the `modal.tsx` file directly into your project's components folder.\n- Step3: Paste the `modal.module.css` file into the styles folder of your project.\n\n![image](https://github.com/creative-tutorials/react-modal-component/assets/68476321/e8a9081f-d219-498c-8cc6-ae0697de6d78)\n\n- Step4: Make sure you have the `react-lazy-load-image-component` package installed in your project.\n\n- Step5: In the package's src folder, locate the `state.tsx` file. Copy the state properties used and paste them into your own codebase.\n\n\u003e **Note**: Only copy the state properties, not the entire function wrapper. The code should look something like this\n\n```tsx\nconst [modalState, setModalState] = useState({ isModal: false, message: \"\" });\n```\n\n- Step6: Go to the function folder located at `node_modules/devtreasure-react-modal-component`. Copy the show and hide functions from that folder and paste them into your codebase where you imported the modal from.\n- Step 7: Importing the style\n\nNo need to worry about this step as it's already done for you. Just make sure you change the path to match your project's file structure. For example, your style import could look something like this: `/styles/modal.module.css` or `/styles/animation/modal.module.css`.\n\nYour full code should look something like this:\n\n```tsx\nimport {\n  LazyLoadImage,\n  LazyLoadComponent,\n} from \"react-lazy-load-image-component\";\nimport { useState, useEffect, MouseEventHandler, lazy } from \"react\";\nconst ReactModalComponent = lazy(\n  () =\u003e import(\"../../components/function/modal/ReactModalComponent\")\n);\n\nfunction App() {\n  const [modalState, setModalState] = useState({ isModal: false, message: \"\" });\n\n  const showModal = () =\u003e {\n    setModalState((prevState) =\u003e {\n      return {\n        ...prevState,\n        isModal: true,\n      };\n    });\n  };\n  const hideModal = () =\u003e {\n    setModalState((prevState) =\u003e {\n      return {\n        ...prevState,\n        isModal: false,\n      };\n    });\n  };\n  return (\n    \u003c\u003e\n      \u003cLazyLoadComponent\u003e\n        \u003cReactModalComponent\n          isModal={modalState.isModal}\n          performTwoFunctions={performTwoFunctions}\n          hideModal={hideModal}\n        /\u003e\n      \u003c/LazyLoadComponent\u003e\n    \u003c/\u003e\n  );\n}\nexport default App;\n```\n\n## How to show the modal\n\nTo display your modal, please copy the code snippet below. Note that it doesn't have to be a button; you can use any HTML tags in your codebase.\n\n```tsx\n\u003cbutton id={\"hello-world\"} onClick={showModal}\u003e\n  Show Modal\n\u003c/button\u003e\n```\n\n## How to update Package\n\nIf you want to update the package simpley update using the following\n\n| npm                              | yarn                               | pnpm                          |\n| -------------------------------- | ---------------------------------- | ----------------------------- |\n| `$ npm update react-modal-component` | `$ yarn upgrade react-modal-component` | `$ pnpm up react-modal-component` |\n\n\u003e **Note**: In case there are significant changes to the code, please make sure to copy the updated code into your codebase again.\n.\n\u003e **Note**: You might see a function called `performTwoFunctions`. Please delete that. This was meant to pefrom two operations. When I was working on this.\n\u003e\n\u003e ..........................................................................................\n.\n\u003e **Note**: Please note that your codebase may be different from the example provided. The key is to import the component, the style, and call the necessary functions accordingly.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreative-tutorials%2Freact-modal-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreative-tutorials%2Freact-modal-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreative-tutorials%2Freact-modal-component/lists"}