{"id":22944424,"url":"https://github.com/surinderlohat/react-dialog","last_synced_at":"2026-03-20T00:02:51.487Z","repository":{"id":57683922,"uuid":"491506785","full_name":"surinderlohat/react-dialog","owner":"surinderlohat","description":"Easy can and clean way to show dialogs in react application","archived":false,"fork":false,"pushed_at":"2022-05-13T08:21:18.000Z","size":2,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T14:49:01.326Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/surinderlohat.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}},"created_at":"2022-05-12T12:35:09.000Z","updated_at":"2022-05-13T08:24:00.000Z","dependencies_parsed_at":"2022-09-14T21:50:15.739Z","dependency_job_id":null,"html_url":"https://github.com/surinderlohat/react-dialog","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surinderlohat%2Freact-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surinderlohat%2Freact-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surinderlohat%2Freact-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surinderlohat%2Freact-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surinderlohat","download_url":"https://codeload.github.com/surinderlohat/react-dialog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246712723,"owners_count":20821787,"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":[],"created_at":"2024-12-14T14:18:30.856Z","updated_at":"2026-01-08T17:45:29.062Z","avatar_url":"https://github.com/surinderlohat.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Dialog\n\nShow Dialogs with easy way in react JS, super easy to use and can handel all the major user cases.\n##### Based on the React hooks and reactive programing.\n#### No extra dependencies pure react js code \u0026 lightweight.\n\n## Features\n1. useDialog Hook to show dialogs in functional components.\n3. use dialog from any UI library i.e MUI/bootstrap  or any other UI library\n2. Open source Free to use.\n\n## Installation\n```sh\nnpm install @surinderlohat/react-dialog\nor\nyarn add @surinderlohat/react-dialog\n```\n## How to use\n- Add Dialog Provider\nApp.tsx\n```sh\nimport { FC } from 'react';\nimport { DialogProvider } from '@surinderlohat/react-dialog';\nimport BootstrapDialog from './BootstrapDialog';\nimport MUIDialog from './MUIDialog';\n\n// App.tsx\nconst App: FC = () =\u003e {\n  return (\n    \u003cDialogProvider\u003e\n      \u003cBootstrapDialog /\u003e\n      \u003cMUIDialog /\u003e\n    \u003c/DialogProvider\u003e\n  );\n};\n\nexport default App;\n```\n- Import Use Dialog Hook that's it \n  #### MUI Dialog Example :\n```sh\nimport { FC } from 'react';\nimport { Box, Button, Dialog, DialogTitle } from '@mui/material';\nimport { useDialog } from '@surinderlohat/react-dialog';\n\nconst MuiDialog: FC = () =\u003e {\n  const dialog = useDialog();\n\n  // Show MUI Dialog\n  const showMuiDialog = () =\u003e {\n    dialog.openDialog(\n      \u003cDialog open={true} onClose={() =\u003e dialog.closeDialog()}\u003e\n        \u003cDialogTitle\u003eMUI Dialog Example\u003c/DialogTitle\u003e\n        \u003cp\u003eWelcome to react dialog\u003c/p\u003e\n      \u003c/Dialog\u003e\n    );\n  };\n\n  return (\n    \u003cBox sx={{ display: 'flex', justifyContent: 'center' }}\u003e\n      \u003cButton onClick={showMuiDialog}\u003eSHOW MUI DIALOG \u003c/Button\u003e\n    \u003c/Box\u003e\n  );\n};\nexport default MuiDialog;\n```\n #### Bootstrap Dialog Example :\n```sh\nimport { FC } from 'react';\nimport { useDialog } from '@surinderlohat/react-dialog';\nimport { Modal, Button } from 'react-bootstrap';\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\nconst BootstrapDialog: FC = () =\u003e {\n  const dialog = useDialog();\n\n  // Show Bootstrap Dialog\n  const showBootstrapDialog = () =\u003e {\n    dialog.openDialog(\n      \u003cModal.Dialog\u003e\n        \u003cModal.Header closeButton\u003e\n          \u003cModal.Title\u003eBootstrap Dialog Example\u003c/Modal.Title\u003e\n        \u003c/Modal.Header\u003e\n        \u003cModal.Body\u003e\n          \u003cp\u003eModal body text goes here.\u003c/p\u003e\n        \u003c/Modal.Body\u003e\n        \u003cModal.Footer\u003e\n          \u003cButton variant=\"secondary\" onClick={() =\u003e dialog.closeDialog()}\u003e\n            Close\n          \u003c/Button\u003e\n          \u003cButton variant=\"primary\"\u003eSave changes\u003c/Button\u003e\n        \u003c/Modal.Footer\u003e\n      \u003c/Modal.Dialog\u003e\n    );\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cButton onClick={showBootstrapDialog}\u003eShow Dialog\u003c/Button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default BootstrapDialog;\n```\n## License\nMIT **Free Software!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurinderlohat%2Freact-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurinderlohat%2Freact-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurinderlohat%2Freact-dialog/lists"}