What is the bestway to implement global modals in NextJS without using external libs
Answered
Champagne D’Argent posted this in #help-forum
Champagne D’ArgentOP
Preface: I am creating a modal system using id based opening and closing with an jotai atom to manage the global state and using react portal, I tried using headless ui, but they for some reason didn't show the elements behind it
Issue: By using react portal it works but it hinders any hmr after styling the modal which causes me to restart the nextjs server every time I want to see the new changes
Ask: Is there any way to hoist the modal to a specified id without hmr breaking
Issue: By using react portal it works but it hinders any hmr after styling the modal which causes me to restart the nextjs server every time I want to see the new changes
Ask: Is there any way to hoist the modal to a specified id without hmr breaking
Answered by Champagne D’Argent
I got it working the hmr big was due to bad imports after refactoring and I just switched to the browser native modal
4 Replies
HMR is working for me on either React Portal or Headless UI, it's probably some mistakes in your code instead of their problems
Could you provide some implementation details about your modal system? (like some code)
European sprat
Here's a way with no libs to do modals but it may not be right for your use case
https://github.com/vercel-labs/nextgram
https://github.com/vercel-labs/nextgram
Champagne D’ArgentOP
I got it working the hmr big was due to bad imports after refactoring and I just switched to the browser native modal
Answer