{"id":23204889,"url":"https://github.com/quernest/mui-modal-provider","last_synced_at":"2025-04-12T19:41:26.850Z","repository":{"id":37804725,"uuid":"235208798","full_name":"Quernest/mui-modal-provider","owner":"Quernest","description":"🌞 Context API and Hooks based Modal Provider for react material-ui framework","archived":false,"fork":false,"pushed_at":"2025-01-26T20:39:11.000Z","size":1779,"stargazers_count":79,"open_issues_count":5,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T23:09:06.910Z","etag":null,"topics":["context","context-api","context-api-react","hooks","material-ui","material-ui-components","material-ui-react","modal","mui","react","react-component","react-hooks","react-material-ui","react-modal","react-modal-component","react-modal-dialog","react-typescript","reactjs","typescript"],"latest_commit_sha":null,"homepage":"","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/Quernest.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":"2020-01-20T22:13:00.000Z","updated_at":"2025-03-15T10:17:52.000Z","dependencies_parsed_at":"2024-03-23T15:25:07.651Z","dependency_job_id":"338d5cb5-f02a-4c3b-b33d-404c6418e6cd","html_url":"https://github.com/Quernest/mui-modal-provider","commit_stats":{"total_commits":101,"total_committers":6,"mean_commits":"16.833333333333332","dds":"0.29702970297029707","last_synced_commit":"4d748f41917ce425a09f930055eb62cc22293454"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quernest%2Fmui-modal-provider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quernest%2Fmui-modal-provider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quernest%2Fmui-modal-provider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quernest%2Fmui-modal-provider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Quernest","download_url":"https://codeload.github.com/Quernest/mui-modal-provider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248624958,"owners_count":21135509,"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":["context","context-api","context-api-react","hooks","material-ui","material-ui-components","material-ui-react","modal","mui","react","react-component","react-hooks","react-material-ui","react-modal","react-modal-component","react-modal-dialog","react-typescript","reactjs","typescript"],"created_at":"2024-12-18T16:29:24.430Z","updated_at":"2025-04-12T19:41:26.831Z","avatar_url":"https://github.com/Quernest.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mui-modal-provider\n\n[![codecov](https://codecov.io/gh/Quernest/mui-modal-provider/branch/master/graph/badge.svg?token=AL2WK480NF)](https://codecov.io/gh/Quernest/mui-modal-provider)\n[![package version](https://img.shields.io/npm/v/mui-modal-provider.svg?style=flat-square)](https://www.npmjs.com/package/mui-modal-provider)\n[![package downloads](https://img.shields.io/npm/dm/mui-modal-provider.svg?style=flat-square)](https://www.npmjs.com/package/mui-modal-provider)\n[![package license](https://img.shields.io/npm/l/mui-modal-provider.svg?style=flat-square)](https://www.npmjs.com/package/mui-modal-provider)\n\nMUI-modal-provider is a helper based on [Context API](https://en.reactjs.org/docs/context.html) and [React Hooks](https://en.reactjs.org/docs/hooks-intro.html) for simplified work with modals (dialogs) built on [Material-UI](https://www.material-ui.com) or custom solutions with suitable props.\n\n## Install\n\n```bash\nnpm install mui-modal-provider # or yarn add mui-modal-provider\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport ModalProvider, { useModal } from 'mui-modal-provider';\nimport Dialog, { DialogProps } from '@mui/material/Dialog';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Button from '@mui/material/Button';\n\ninterface SimpleDialogProps extends DialogProps {\n  title: string,\n};\n\n// Create the dialog you want to use\nconst SimpleDialog: React.FC\u003cSimpleDialogProps\u003e = ({ title, ...props }) =\u003e (\n  \u003cDialog {...props}\u003e\n    \u003cDialogTitle\u003e{title}\u003c/DialogTitle\u003e\n  \u003c/Dialog\u003e\n);\n\n// Use modal hook and show the dialog\nconst App = () =\u003e {\n  const { showModal } = useModal();\n\n  return (\n    \u003cButton\n      variant=\"contained\"\n      onClick={() =\u003e showModal(SimpleDialog, { title: 'Simple Dialog' })}\n      color=\"primary\"\n    \u003e\n      simple dialog\n    \u003c/Button\u003e\n  );\n};\n\nconst container = document.getElementById('root');\nconst root = createRoot(container);\n\n// Wrap the app with modal provider\nroot.render(\n  \u003cModalProvider\u003e\n    \u003cApp /\u003e\n  \u003c/ModalProvider\u003e\n);\n```\n\n## API\n\n### Modal Provider\n| Property | Type | Default | Description | Required |\n|--|--|--|--|--|\n| `legacy` | `Boolean` | `false` | Set to `true` if you want to use mui \u003c 5 version. | false |\n| `suspense` | `Boolean` | `true` | Wraps your modal with the [Suspense](https://beta.reactjs.org/reference/react/Suspense) | false |\n| `fallback` | `Nullable\u003cReactNode\u003e` | `null` | Custom component for the Suspense [fallback](https://beta.reactjs.org/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) prop | false |\n| `children` | `ReactNode` | `undefined` | - | true\n\n*The rest will be added later... Look at examples* 😊\n\n## Examples\n\nSee more examples in [example](https://github.com/Quernest/mui-modal-provider/tree/master/example) folder\n\n## Compatibility\n\nFor [Material-UI v4](https://v4.mui.com/) use `legacy` prop on the ModalProvider.\n\n## Developing \u0026 linking locally\n\nBecause this module utilizes react hooks, it must be linked in a special way that is described here in this [react github issue comment](https://github.com/facebook/react/issues/14257#issuecomment-439967377)\n\n1. Update the react and react-dom versions in this module’s package.json devDependencies match the versions in whatever project you’re linking them in.\n2. `yarn install` in this module’s root directory\n3. Because this module uses hooks, we need to link the module’s react dependency into the project we will be using to test the linked module\n4. `cd node_modules/react` then `yarn link` then inside your linked project run `yarn link react`\n5. In the linked project’s root directory run `yarn install mui-modal-provider`\n6. Then in the module’s root directory run `yarn link`\n7. In the linked project’s root directory run `yarn link mui-modal-provider`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquernest%2Fmui-modal-provider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquernest%2Fmui-modal-provider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquernest%2Fmui-modal-provider/lists"}