Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can you pass react components in html prop? #194

Closed
DanielVain opened this issue May 9, 2022 · 3 comments
Closed

can you pass react components in html prop? #194

DanielVain opened this issue May 9, 2022 · 3 comments

Comments

@DanielVain
Copy link

Screen Shot 2022-05-09 at 20 53 12

using Link component here breaks my alert and it shows nothing except the title.

does Sweetalert2-react-content support react components as html content?

@limonte
Copy link
Member

limonte commented May 10, 2022

Here's the official example of how to use SweetAlert2 + React Router: https://sweetalert2.github.io/recipe-gallery/sweetalert2-react-router.html


⚠️ ⚠️ ⚠️ THE EXAMPLE BELOW IS INCORRECT ⚠️ ⚠️ ⚠️

My guess is that you're using React Router. If so you need to wrap what you're passing to html param into BrowserRouter:

MySwal.fire({
  html: (
    <BrowserRouter>
      ...
    </BrowserRouter>
  ),
})

@GreenAsJade
Copy link
Contributor

^^ This advice is "wrong", in the sense that if you do this you are creating a second routing context, which won't work the way you want.

It will render the <Link>, but the rendered link won't do anything when you click on it.

https://stackoverflow.com/a/72690830/554807

@limonte
Copy link
Member

limonte commented Jun 29, 2022

Here's the official example of how to use SweetAlert2 + React Router: https://sweetalert2.github.io/recipe-gallery/sweetalert2-react-router.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants