{"id":15043450,"url":"https://github.com/omarandstuff/modales","last_synced_at":"2026-01-06T12:52:12.238Z","repository":{"id":35010626,"uuid":"194145688","full_name":"omarandstuff/modales","owner":"omarandstuff","description":"Router and modals advanced system","archived":false,"fork":false,"pushed_at":"2023-01-04T04:23:40.000Z","size":1104,"stargazers_count":0,"open_issues_count":39,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T16:48:25.966Z","etag":null,"topics":["modals","react","react-router","system"],"latest_commit_sha":null,"homepage":null,"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/omarandstuff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-27T18:37:41.000Z","updated_at":"2020-03-19T19:50:06.000Z","dependencies_parsed_at":"2023-01-15T12:00:48.802Z","dependency_job_id":null,"html_url":"https://github.com/omarandstuff/modales","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omarandstuff%2Fmodales","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omarandstuff%2Fmodales/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omarandstuff%2Fmodales/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omarandstuff%2Fmodales/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omarandstuff","download_url":"https://codeload.github.com/omarandstuff/modales/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245841760,"owners_count":20681196,"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":["modals","react","react-router","system"],"created_at":"2024-09-24T20:49:03.958Z","updated_at":"2026-01-06T12:52:12.199Z","avatar_url":"https://github.com/omarandstuff.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/omarandstuff/modales/master/media/modales-logo.png\" alt=\"Modales\" title=\"Modales\" width=\"512\"\u003e\n\u003c/h1\u003e\n\n[![npm version](https://badge.fury.io/js/modales.svg)](https://www.npmjs.com/package/modales)\n[![Build Status](https://travis-ci.org/omarandstuff/modales.svg?branch=master)](https://travis-ci.org/omarandstuff/modales)\n[![Maintainability](https://api.codeclimate.com/v1/badges/89605c0247aaa26ccf35/maintainability)](https://codeclimate.com/github/omarandstuff/modales/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/89605c0247aaa26ccf35/test_coverage)](https://codeclimate.com/github/omarandstuff/modales/test_coverage)\n\nModales provides a high level interface to manage modals and `Route` modals inside your React application. Modales is not a/(part of a) CSS library so modals content will look just as you like them to look; Modales will just display a modal in the center of the screen with the content you provide which also takes into account content that is bigger that the view and will provide scroll bars to it.\n\nModales uses [react-router](https://github.com/ReactTraining/react-router) to successfully manage route modales, it also provides extra tools to navigate.\n\n## Install\n\n```sh\nnpm install modales\n\nyarn add modales\n```\n\n## Getting staterd\n\nYou will need a Modales instance to connect, this will connect with the `ModalesProvider`.\n\n```js\n// modales.js\n\nimport Modales from 'modales'\n\nconst configuration = { blurEnabled: true, routeModalsEnabled: true }\nconst modales = new Modales(configuration)\n\nexport default modales\n```\n\nTypescript:\n\n```ts\n// modales.ts\n\nimport Modales, { ModalesConfiguration } from 'modales'\n\nconst configuration: ModalesConfiguration = { blurEnabled: true, routeModalsEnabled: true }\nconst modales: Modales = new Modales(configuration)\n\nexport default modales\n```\n\nThen we need to use the `ModalesProvider` component to wrap your app and enable the modals display. You should also wrap the app with the `react-router` Router\n\n```js\n// App.js\nimport React from 'react'\nimport { BrowserRouter, Route } from 'react-router-dom'\nimport { ModalesProvider } from 'modales'\n\n// Modales instance\nimport modales from './modales'\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cdiv className=\"app\"\u003e\n        \u003cBrowserRouter\u003e\n          \u003cModalesProvider modales={modales}\u003e\n            \u003cRoute exact path=\"/\" component={SomeComponent}\u003e\u003c/Route\u003e\n          \u003c/ModalesProvider\u003e\n        \u003c/BrowserRouter\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n## Navigate to a modal route\n\nUse react-router as you normally do just set the state of any route to contain the property modal as true.\n\n```js\n\u003cLink to={{ pathname: '/modal', state: { modal: true } }}\u003eVisit modal route\u003c/Link\u003e\n```\n\n### Groups\n\nIf you want to give the user a feeling like navigating inside the route modal, something like [IMDB](https://www.imdb.com/title/tt6320628/mediaviewer/rm952737537) when you click on the picture and navigate between them and when you go back no matter how many pictures you navigate it will take you to the movie page.\n\nFor this we have `modalGroups` so when you navigate to a new route in the same modal group it will just change the content of the modal with the new route.\n\nAdditionally use replace to make the effect of going back we talked early.\n\n```js\n\u003cLink replace to={{ pathname: '/modal', state: { modal: true, modalGroup: 'pictures' } }}\u003e\n  Visit modal route\n\u003c/Link\u003e\n```\n\n### Background\n\nYou can choose between 3 types of backgrounds `transparent | translucent | blurred`, just pass the background prop into the state.\n\n\n```js\n\u003cLink replace to={{ pathname: '/modal', state: { modal: true, background: 'blurred' } }}\u003e\n  Visit modal route\n\u003c/Link\u003e\n```\n\n## Custom modals\n\nUse the Modales instance to launch modals with a particular content. Optionally you can also provided the kind of background and a `onOutsideClick` callback and a `onScape` one, to handle if you really want the modal to be closed (Probably launch another modal asking \"are you sure?\" to the user).\n\n```js\n//anyfile.js\nimport modales from './modales'\n\n// Return true if you actually want the modal to be closed\nfunction onOutsideClick(event) {\n  if (somethig) {\n    return true\n  }\n}\n\n// Return true if you actually want the modal to be closed\nfunction onScape(event) {\n  if (somethig) {\n    return true\n  }\n}\n\nmodales.launchModal(\u003cSomeModalConetent props /\u003e, 'transparent', onOutsideClick, onScape)\n```\n\nTypescript:\n\n```ts\n//anyfile.ts\nimport modales, { ModalBackground } from './modales'\n\n// Return true if you actally want the modal to be closed\nfunction onOutsideClick(event: MouseEvent): boolean {\n  if (somethig) {\n    return true\n  }\n}\n\n// Return true if you actally want the modal to be closed\nfunction onScape(event: KeyboardEvent): boolean {\n  if (somethig) {\n    return true\n  }\n}\n\nconst background: ModalBackground = 'transparent'\n\nmodales.launchModal(\u003cSomeModalConetent props /\u003e, background, onOutsideClick, onScape)\n```\n\n## Router Ref\n\nModales comes with a useful reference to the router so you can call route actions from your modales instance.\n\n```js\n//anyfile.js\nimport modales from './modales'\n\nmodales.router.push('/path', { modal: true })\nmodales.router.goBack()\n```\n\n## Manually Pop a custom modal\n\nIf you really need to pop the top modal without depending `onOutsideClick` and `onScape` events you can use the modal instance to do so.\n\n```js\n//anyfile.js\nimport modales from './modales'\n\nmodales.launchModal(\u003cSomeModalConetent props /\u003e)\n\nsetTimeOut(() =\u003e {\n  modales.popModal()\n}, 2000)\n```\n\nWARNING: do not use this for a route modal, route modals depend on the navigation history so you can only dismiss a route modal by navigating back or to another non modal route.\n\n## Contributions\n\nPRs are welcome\n\n## Lisence\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomarandstuff%2Fmodales","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomarandstuff%2Fmodales","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomarandstuff%2Fmodales/lists"}