{"id":30065286,"url":"https://github.com/david-sling/use-modal-control-query","last_synced_at":"2026-04-11T20:36:58.152Z","repository":{"id":308173566,"uuid":"1030129365","full_name":"david-sling/use-modal-control-query","owner":"david-sling","description":"A hook to control shadcn modal components using query params","archived":false,"fork":false,"pushed_at":"2025-08-04T13:57:32.000Z","size":211,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-04T17:42:15.943Z","etag":null,"topics":["hooks","modal","query","shadcn","shadcn-ui","use-query"],"latest_commit_sha":null,"homepage":"https://use-mcq.davidsling.in","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/david-sling.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,"zenodo":null}},"created_at":"2025-08-01T06:14:13.000Z","updated_at":"2025-08-04T13:57:35.000Z","dependencies_parsed_at":"2025-08-04T17:53:36.753Z","dependency_job_id":null,"html_url":"https://github.com/david-sling/use-modal-control-query","commit_stats":null,"previous_names":["david-sling/use-modal-control-query"],"tags_count":null,"template":false,"template_full_name":"shadcn-ui/registry-template","purl":"pkg:github/david-sling/use-modal-control-query","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-sling%2Fuse-modal-control-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-sling%2Fuse-modal-control-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-sling%2Fuse-modal-control-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-sling%2Fuse-modal-control-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/david-sling","download_url":"https://codeload.github.com/david-sling/use-modal-control-query/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-sling%2Fuse-modal-control-query/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269373109,"owners_count":24406320,"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-08-08T02:00:09.200Z","response_time":72,"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":["hooks","modal","query","shadcn","shadcn-ui","use-query"],"created_at":"2025-08-08T06:00:48.165Z","updated_at":"2025-10-25T13:43:12.682Z","avatar_url":"https://github.com/david-sling.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useModalControlQuery\n\nA hook to control shadcn modal components using query params\n\n## Installation\n\n```bash\nnpx shadcn@latest add https://use-mcq.davidsling.in/r/use-modal-control-query.json\n```\n\n## Usage\n\n```tsx\n'use client'\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog'\nimport { Button } from '@/components/ui/button'\nimport { useModalControlQuery } from '../../hooks/use-modal-control-query'\n\nexport default function SimpleExample() {\n  const dialog = useModalControlQuery('hello')\n  return (\n    \u003cDialog {...dialog.control}\u003e\n      \u003cDialogTrigger asChild\u003e\n        \u003cButton\u003eSay Hello\u003c/Button\u003e\n      \u003c/DialogTrigger\u003e\n      \u003cDialogContent\u003e\n        \u003cDialogHeader\u003e\n          \u003cDialogTitle\u003eHello\u003c/DialogTitle\u003e\n          \u003cDialogDescription\u003eNotice how the url parameters are updated\u003c/DialogDescription\u003e\n        \u003c/DialogHeader\u003e\n      \u003c/DialogContent\u003e\n    \u003c/Dialog\u003e\n  )\n}\n```\n\nThe above code will update the query parameters to be `?modal=hello` when the modal is open. It will also ensure that if the page is reloaded with the query parameter present, the modal stays open.\n\n## Compatible components\n\nThe following shadcn components are compatible with use-mcq\n\n- [dialog](https://ui.shadcn.com/docs/components/dialog)\n- [sheet](https://ui.shadcn.com/docs/components/sheet)\n- [drawer](https://ui.shadcn.com/docs/components/drawer)\n- [select](https://ui.shadcn.com/docs/components/select)\n- [dropdown-menu](https://ui.shadcn.com/docs/components/dropdown-menu)\n- [collapsible](https://ui.shadcn.com/docs/components/collapsible)\n\n## Live Example\n\nLive example available at https://use-mcq.davidsling.in\n\n## Documentation\n\nVisit the [use-mcq documentation](https://use-mcq.davidsling.in) to view the full documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-sling%2Fuse-modal-control-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavid-sling%2Fuse-modal-control-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-sling%2Fuse-modal-control-query/lists"}