https://github.com/david-sling/use-modal-control-query
A hook to control shadcn modal components using query params
https://github.com/david-sling/use-modal-control-query
hooks modal query shadcn shadcn-ui use-query
Last synced: 3 months ago
JSON representation
A hook to control shadcn modal components using query params
- Host: GitHub
- URL: https://github.com/david-sling/use-modal-control-query
- Owner: david-sling
- License: mit
- Created: 2025-08-01T06:14:13.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-04T13:57:32.000Z (11 months ago)
- Last Synced: 2025-08-04T17:42:15.943Z (11 months ago)
- Topics: hooks, modal, query, shadcn, shadcn-ui, use-query
- Language: TypeScript
- Homepage: https://use-mcq.davidsling.in
- Size: 206 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useModalControlQuery
A hook to control shadcn modal components using query params
## Installation
```bash
npx shadcn@latest add https://use-mcq.davidsling.in/r/use-modal-control-query.json
```
## Usage
```tsx
'use client'
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { useModalControlQuery } from '../../hooks/use-modal-control-query'
export default function SimpleExample() {
const dialog = useModalControlQuery('hello')
return (
Say Hello
Hello
Notice how the url parameters are updated
)
}
```
The 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.
## Compatible components
The following shadcn components are compatible with use-mcq
- [dialog](https://ui.shadcn.com/docs/components/dialog)
- [sheet](https://ui.shadcn.com/docs/components/sheet)
- [drawer](https://ui.shadcn.com/docs/components/drawer)
- [select](https://ui.shadcn.com/docs/components/select)
- [dropdown-menu](https://ui.shadcn.com/docs/components/dropdown-menu)
- [collapsible](https://ui.shadcn.com/docs/components/collapsible)
## Live Example
Live example available at https://use-mcq.davidsling.in
## Documentation
Visit the [use-mcq documentation](https://use-mcq.davidsling.in) to view the full documentation.