{"id":29138740,"url":"https://github.com/remoteoss/react-url-modal","last_synced_at":"2025-10-10T11:39:51.583Z","repository":{"id":39253809,"uuid":"452735396","full_name":"remoteoss/react-url-modal","owner":"remoteoss","description":"A React library to help you keep track of your modal state using the URL","archived":false,"fork":false,"pushed_at":"2023-09-23T16:14:36.000Z","size":925,"stargazers_count":128,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-09-10T12:02:25.480Z","etag":null,"topics":["react"],"latest_commit_sha":null,"homepage":"http://react-url-modal.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/remoteoss.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-27T15:24:17.000Z","updated_at":"2025-08-13T20:06:31.000Z","dependencies_parsed_at":"2023-09-23T18:24:13.346Z","dependency_job_id":null,"html_url":"https://github.com/remoteoss/react-url-modal","commit_stats":{"total_commits":81,"total_committers":7,"mean_commits":"11.571428571428571","dds":0.4691358024691358,"last_synced_commit":"051558d2fc940dac81b26ba3ccd1e497ea4c0e7f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/remoteoss/react-url-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remoteoss%2Freact-url-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remoteoss%2Freact-url-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remoteoss%2Freact-url-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remoteoss%2Freact-url-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remoteoss","download_url":"https://codeload.github.com/remoteoss/react-url-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remoteoss%2Freact-url-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279003718,"owners_count":26083610,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"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":["react"],"created_at":"2025-06-30T14:11:09.772Z","updated_at":"2025-10-10T11:39:51.578Z","avatar_url":"https://github.com/remoteoss.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React URL Modal\n\nA React library to help you keep track of your modal state using the URL.\n\n![Build Passing](https://img.shields.io/github/checks-status/remoteoss/react-url-modal/main?style=flat-square)\n\n## Features\n\n- ☁️ Have URL's for modals\n- 🔒 Encode all the parameters sent to a modal\n- 🦄 Works on any framework since it uses [the history api](https://developer.mozilla.org/en-US/docs/Web/API/History_API)\n- 📦 Headless and tiny\n- 🚀 Supports React Portals\n\n## Documentation\n\n[Documentation](https://react-url-modal.vercel.app)\n\nTo create a new instance of modals, import the `URLModal` and pass the modals you have in your application:\n\n```jsx\nimport { URLModal } from 'react-url-modal';\nimport { CreateAccount, EditAccount } from './Modals';\n\nexport const App = () =\u003e (\n  \u003cURLModal\n    modals={{\n      createAccount: CreateAccount,\n      editAccount: EditAccount,\n    }}\n  /\u003e\n);\n```\n\nTo open this modal from any button in your application, use the `openModal` function and pass the name of the modals and any params this modal needs:\n\n```jsx\nimport { openModal } from 'react-url-modal';\n\n\u003cbutton\n  onClick={() =\u003e\n    openModal({\n      name: 'editAccount',\n      params: {\n        userId: user.id,\n      },\n    })\n  }\n\u003e\n  Edit your profile\n\u003c/button\u003e;\n```\n\nIf you want to use a link to open the modals that's also possible taking advantage of the `encodeUrlParams` and creating a link:\n\n```\n\u003ca href=`/account?modal=editAccount\u0026params=${encodeUrlParams({ id: user.id })}`\u003eEdit account\u003c/a\u003e\n```\n\nThen, in your modal you will have access to any param you passed to it:\n\n```jsx\nconst ModalWithParams = ({\n  params,\n  onClose,\n}: {\n  params: { [key: string]: string },\n  onClose: () =\u003e void,\n}) =\u003e (\n  \u003c\u003e\n    {params.userId}\n    \u003cbutton onClick={onClose}\u003eCloseModal\u003c/button\u003e\n  \u003c/\u003e\n);\n```\n\nYou can also pass a `Wrapper` to the `\u003cURLModal\u003e` component which will wrap all your modals and will have access to the `onClose` function:\n\n```jsx\n\u003cURLModal\n  modals={{\n    customWrapper: CustomWrapperModal,\n  }}\n  Wrapper={({ onClose, children }) =\u003e (\n    \u003c\u003e\n      {children}\n      \u003cbutton onClick={onClose} type=\"button\" aria-label=\"Close modal\"\u003e\n        x\n      \u003c/button\u003e\n    \u003c/\u003e\n  )}\n/\u003e\n```\n\nTo see all the available props, please check the API reference below.\n\n## API Reference\n\n#### URLModal\n\n```jsx\n\u003cURLModal\n  modals={{\n    test: TestModal,\n  }}\n/\u003e\n```\n\n| Parameter       | Type                                                    | Description                                                     |\n| :-------------- | :------------------------------------------------------ | :-------------------------------------------------------------- |\n| `modals`        | `[name: string]: React Component or Promise\u003cComponent\u003e` | **Required**                                                    |\n| `Wrapper`       | `React Component`                                       | A component to wrap each modal with                             |\n| `usePortal`     | `boolean`                                               | Should this modal be mounted on a portal                        |\n| `portalElement` | `HTML Element`                                          | A component to mount the modals in, defaults to body            |\n| `adapter`       | `null or \"nextjs\"`                                      | If set to NextJS it will use next router instead of history API |\n\n#### openModal\n\nWill open any modal you declared in `modals` by passing its name.\n\n```js\nopenModal({\n    name: 'createAccountForm'\n    params: {\n        hello: 'world'\n    }\n})\n```\n\n| Parameter | Type                      | Description                             |\n| :-------- | :------------------------ | :-------------------------------------- |\n| `name`    | `string`                  | **Required**. Name of the modal to open |\n| `params`  | `{[key: string]: string}` | Any params this modal need              |\n\n#### closeModal\n\nClose all open modals.\n\n```js\ncloseModal();\n```\n\n#### isModalOpen\n\nChecks if a modal passed is open at the moment the function is called\n\n```js\nisModalOpen('createAccountForm');\n```\n\n| Parameter | Type     | Description                                   |\n| :-------- | :------- | :-------------------------------------------- |\n| `name`    | `string` | **Required**. Name of the modal to check open |\n\n#### encodeUrlParams\n\nUseful if you want to open a modal by a link instead of a button. It will create the url from the params passed.\n\n```js\nrouter.push({\n  pathname: '/account',\n  query: {\n    modal: 'editAccount',\n    params: encodeUrlParams({\n      id: user.id,\n    }),\n  },\n});\n```\n\n| Parameter | Type     | Description                             |\n| :-------- | :------- | :-------------------------------------- |\n| `params`  | `Object` | **Required**. Object you want to encode |\n\n## Run Locally\n\nClone the project\n\n```bash\n  git clone git@github.com:remoteoss/react-url-modal.git\n```\n\nGo to the project directory\n\n```bash\n  cd react-url-modal\n```\n\nInstall dependencies\n\n```bash\n  yarn \u0026\u0026 yarn add next --peer\n```\n\nStart the server\n\n```bash\n  yarn dev\n```\n\nTo open the example and test your changes please in another tab and run:\n\n```bash\ncd example\nyarn \u0026\u0026 yarn dev\n```\n\n## Running Tests\n\nTo run tests, run the following command\n\n```bash\n  yarn test\n```\n\nTo run coverage you can run:\n\n```bash\n  yarn test:coverage\n```\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremoteoss%2Freact-url-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremoteoss%2Freact-url-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremoteoss%2Freact-url-modal/lists"}