Search code examples
htmlurlnext.jsmodal-dialogpopup

How to Trigger a Modal with a Link

I have a modal on my page (Next.js) that is triggered clicking a button:

<button type='button' onClick={() => setOpen(true)}>

The modal:

<Modal
  id='demo'
  show={isOpen}
  onClose={() => setOpen(false)}
>

The modal is hidden by default. And I would like to send a link to client. When the client clicks on the link, they will be brought to the page with the modal opened. Is it possible to do this? How? Thank you very much.

I tried to put the id in the URL like: https://example.com/contact#demo , but no luck. I was thinking about using the query mark(?), but can't figure how it would work.

Solution

  • if NextJS is with react-dom then you can use useSearchParams from react-router-dom

    import { useSearchParams } from 'react-router-dom'
...
....
const MyComponent = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const q = searchParams.get('demo')

  return (
  )
}