{"id":27736789,"url":"https://github.com/satishnaikawadi2011/repopup","last_synced_at":"2026-05-01T04:40:42.804Z","repository":{"id":57688851,"uuid":"476527150","full_name":"satishnaikawadi2011/repopup","owner":"satishnaikawadi2011","description":"Easy to use as well as reusable and customizable react modals","archived":false,"fork":false,"pushed_at":"2022-04-21T13:35:11.000Z","size":1506,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T15:05:18.309Z","etag":null,"topics":["alert","customizable","dialog","modals","popup","react","react-alert","react-component","react-dialog","react-modals","react-popup","responsive","reusable"],"latest_commit_sha":null,"homepage":"https://repopup-docs.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/satishnaikawadi2011.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-01T00:58:42.000Z","updated_at":"2022-04-17T05:03:51.000Z","dependencies_parsed_at":"2022-09-10T09:12:16.361Z","dependency_job_id":null,"html_url":"https://github.com/satishnaikawadi2011/repopup","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/satishnaikawadi2011/repopup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satishnaikawadi2011%2Frepopup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satishnaikawadi2011%2Frepopup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satishnaikawadi2011%2Frepopup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satishnaikawadi2011%2Frepopup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/satishnaikawadi2011","download_url":"https://codeload.github.com/satishnaikawadi2011/repopup/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satishnaikawadi2011%2Frepopup/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32485297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["alert","customizable","dialog","modals","popup","react","react-alert","react-component","react-dialog","react-modals","react-popup","responsive","reusable"],"created_at":"2025-04-28T14:32:25.445Z","updated_at":"2026-05-01T04:40:42.789Z","avatar_url":"https://github.com/satishnaikawadi2011.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/satishnaikawadi"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://repopup-docs.vercel.app/\" target=\"_blank\"\u003e\n    \u003cimg \n      src=\"https://res.cloudinary.com/dyfm31f1n/image/upload/v1650036003/repopup/icon-logo_mrbgeu.svg\"\n      alt=\"REPopup\"\n      title=\"REPopup\"\n      width=\"150\"\n    /\u003e\n    \u003cbr/\u003e\n\u003cimg \n      src=\"https://res.cloudinary.com/dyfm31f1n/image/upload/v1650036077/repopup/text-logo_kndalr.png\" align=\"center\" width=\"400\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eREPopup\u003c/h1\u003e\n\u003cp align=\"center\"\u003eEasy to use and customizable react modals.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/repopup\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/repopup\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- \u003cimg src=\"https://img.shields.io/bundlephobia/min/repopup\"/\u003e --\u003e\n  \u003ca href=\"https://github.com/satishnaikawadi2011/repopup/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/satishnaikawadi2011/repopup\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://repopup-docs.vercel.app/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://res.cloudinary.com/dyfm31f1n/image/upload/v1649741179/repopup/repopup-demo_t2ljam.png\" alt=\"REPopup Preview\" title=\"REPopup Preview\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nThe aim of **REPopup** is to provide an all-in-one UI components related to modal and popup windows for creating apps in react. There are many great ui components made by developers all around open source. REPopup makes using modals and popups very easy by giving you a ready made as well as easily customizable kit with consistent api and look and feel.\n\n## Features\n\n- React modal components for easy and fast web development.\n- Flexible modal positioning.\n- Styled components and easy to customize.\n- Works in major browsers without polyfills.\n- Ready made and well designed InputDialog component.\n- Alert component with five different variants.\n- Supports TypeScript.\n- And much more !\n\n## Resources\n\n- [Demo](https://repopup-docs.vercel.app/docs/usage#quick-start)\n- [Documentation](https://repopup-docs.vercel.app/docs/overview)\n- [Playground](https://repopup-docs.vercel.app/docs/playground/modal)\n- [CodeSandbox](https://codesandbox.io/s/usage-forked-64di3c?file=/index.js)\n\n## Installation\n\nInstall via \u003ca href=\"https://www.npmjs.com/package/repopup\"\u003eNPM\u003c/a\u003e\n\n```\nnpm install repopup\n```\n\nInstall via \u003ca href=\"https://yarnpkg.com/package/repopup\"\u003eYarn\u003c/a\u003e\n\n```\nyarn add repopup\n```\n\n## Peer dependencies\n\n### Install styled-components\n\nInstall via \u003ca href=\"https://www.npmjs.com/package/repopup\"\u003eNPM\u003c/a\u003e\n\n\n```bash\nnpm install styled-components\n```\nInstall via \u003ca href=\"https://yarnpkg.com/package/repopup\"\u003eYarn\u003c/a\u003e\n\n```bash\nyarn add styled-components\n```\n\n_If you have any issues installing styled-components, check out their\ninstallation guide\n[here](https://styled-components.com/docs/basics#installation)._\n\n## Getting Started\n\nFor complete usage, visit the \u003ca href=\"https://repopup-docs.vercel.app/docs/overview\"\u003edocs\u003c/a\u003e.\n\n\u003e The below example demonstrates very basic and full usages of Modal component respectively.\n\n- Initialize a open state with `boolean` value `false` and assign it as \u003cstrong\u003e'open'\u003c/strong\u003e prop. Now it will control wheather Modal should be open or closed.\n- For `onRequestClose` prop, pass the `Function` which will set the open state to `false`\n\n\u003cbr/\u003e\n    \n### Install the REPopup and styled-components package from the NPM\n\n```bash\nnpm install repopup styled-components\n```\n\n### Import the RepopupProvider and wrap your App component\n\n```tsx\nimport { RepopupProvider } from 'repopup';\nReactDOM.render(\n\t\t\u003cRepopupProvider theme=\"dark\"\u003e\n\t\t\t\u003cApp /\u003e\n\t\t\u003c/RepopupProvider\u003e,\n\tdocument.getElementById('root')\n```\n\n### Import the component and use it in your project\n\n#### Basic Usage\n\n\n```tsx\nimport React, { useState } from 'react';\nimport { Modal } from 'repopup';\n\nfunction App() {\n  const [open,setOpen] = useState(false);\n\nreturn (\n  \u003cdiv\u003e\n\t\u003cbutton onClick={() =\u003e setOpen(true)}\u003eOpen\u003c/button\u003e\n\t\u003cModal \n      onRequestClose={() =\u003e setOpen(false)} \n      open={open} \n      title={`Hello From REPopup 🎉🎉🎉 `} \n     /\u003e\n\u003c/div\u003e\n);\n}\n\nexport default App;\n```\n\n##### Result\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://repopup-docs.vercel.app/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://res.cloudinary.com/dyfm31f1n/image/upload/v1649758556/repopup/basic-usage_r6qslw.png\" alt=\"REPopup Preview\" title=\"REPopup Preview\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n#### Full Usage\n\n```tsx\nimport React, { useState } from 'react';\nimport { Modal } from 'repopup';\n\nfunction App() {\n  const [open,setOpen] = useState(false);\n\n  return (\n   \u003cdiv\u003e\n\t \u003cbutton onClick={() =\u003e setOpen(true)}\u003eOpen\u003c/button\u003e\n\t      \u003cModal\n\t\t\t\tonRequestClose={() =\u003e setOpen(false)}\n\t\t\t\topen={open}\n\t\t\t\ttitle={`Are you sure?`}\n\t\t\t\tsubtitle={`You won't be able to revert this!`}\n\t\t\t\ticon=\"warning\"\n\t\t\t\tcloseOnBackdropClick={true}\n\t\t\t\tshowConfirmButton\n\t\t\t\tconfirmButtonText={`Yes,delete it!`}\n\t\t\t\tonConfirm={() =\u003e console.log('Deleted successfully!!')}\n\t\t\t\tshowDenyButton\n\t\t\t\tdenyButtonText=\"Cancel\"\n\t\t\t\tonDeny={() =\u003e setOpen(false)}\n\t\t\t/\u003e\n\t\t\u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n##### Result\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://repopup-docs.vercel.app/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://res.cloudinary.com/dyfm31f1n/image/upload/v1649759405/repopup/full-usage_m817tt.png\" alt=\"REPopup Preview\" title=\"REPopup Preview\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n## Available Props\n\n|      Props      |          Type           |                                                            Description                                                            |   Default    |\n| :-------------: | :---------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :----------: |\n|   background  |        `string`         |  Popup window background (CSS background property).                                        |   `'#ffffff'`   |\n|     cancelButtonText    |       `string`        |                                              Use this to change the text on the \"Cancel\"-button.                                               |  `Cancel`  |\n|      childrenAfterDefaultContent     |        `ReactNode` \\| `null`        |  Use this to place children after default content of the popup |`null`\n|      childrenBeforeDefaultContent    |        `ReactNode` \\| `null`        |  Use this to place children before default content of the popup |`null`\n|    closeOnBackdropClick     | `boolean`  |                                                       Wheather or not to close the popup on clicking the backdrop                                                       | `true` |\n|   color   | `string`  |                                                     Color for title and content                                                    | `'#000000'`  |\n|   confirmButtonText  | `string` |                                                Use this to change the text on the \"Confirm\"-button.                                                | `'Confirm'`  |\n|    customClass    | `IModalCustomClassType;` |                                                  A custom CSS class for the popup                                                  |  `{}`   |\n|      denyButtonText      |        `string`         |                                               Use this to change the text on the \"Deny\"-button.                                             |  `'Deny'`  |\n|    icon    |        `success`\\| `error`\\| `info`\\| `warning`\\| `question`\\|  `null`       |                                                         varinat of a icon to be shown                                                         |     `null`     |\n|      onCancel    |  `React.MouseEventHandler\u003cHTMLButtonElement\u003e` \\| `undefined`  |                                                           Use this as a click handler for the \"Cancel\"-button.                                                           |     `() =\u003e {}`     |\n|     onConfirm    |        `React.MouseEventHandler\u003cHTMLButtonElement\u003e` \\| `undefined`        |                                                       Use this as a click handler for the \"Confirm\"-button                                                      |    `() =\u003e {}`     |\n|    onDeny      |       `React.MouseEventHandler\u003cHTMLButtonElement\u003e` \\| `undefined`        |                                                      Use this as a click handler for the \"Deny\"-button.                                                      |  `() =\u003e {}`     |\n|     onRequestClose    |        `Function`        |                                                      Function that will be run when the modal is requested to be closed                                                       |   `required`   |\n|     onSuccess     |        `React.MouseEventHandler\u003cHTMLButtonElement\u003e` \\| `undefined`         |                                          Use this as a click handler for the \"Success\"-button.                                         |  `() =\u003e {}`  |\n|    open   |        `boolean`        |                                                          Boolean describing if the modal should be shown or not.                                                           |   `required`    |\n| placement |        `'top'`\\| `'center'`\t\\| `'bottom'`\\| `'center-start'`\\| `'bottom-start'`\\| `'top-start'`\\| `'top-end'`\\| `'bottom-end'`\\| `'center-end'`        |                                           Use this to change Popup window position                                          |    `center`    |\n|   showCancelButton    |        `boolean`        |                                                         If set to true, a \"Cancel\"-button will  be shown.                                                          |   `false`    |\n|   showConfirmButton   |        `boolean`        |                                                         If set to true, a \"Confirm\"-button will  be shown.                                                         |   `false`    |\n|   showDenyButton    |        `boolean`        |                                                        If set to true, a \"Deny\"-button will  be shown.                                                         |   `false`    |\n|   showSuccessButton    |        `boolean`        |                                                         If set to true, a \"Success\"-button will  be shown.                                                        |   `false`    |\n|    subtitle   |  `string`  |                                                         Used for a description for the popup.                                                         |        |\n|     successButtonText     |   `string`    |                                                       Use this to change the text on the \"Success\"-button.                                                      |    `Ok`    |\n|     title     |   `string`    |                                                     Used for the title of the popup                                                    |      |\n\n\n## Support\n\n\u003ca href=\"https://www.buymeacoffee.com/satishnaikawadi\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://res.cloudinary.com/dyfm31f1n/image/upload/v1649760399/repopup/bmc-button_bridqp.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\n\u003c/a\u003e\n\n## License\n\n**REPopup** is licensed under the [MIT License](https://github.com/satishnaikawadi2011/repopup/blob/main/LICENSE).\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsatishnaikawadi2011%2Frepopup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsatishnaikawadi2011%2Frepopup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsatishnaikawadi2011%2Frepopup/lists"}