DEV Community

Creating Notifications with React Create Portals

LV 🏳️‍🌈 on January 01, 2019

Feel free to jump straight to my CodePen example. This post also appears on my personal blog. When developing UI with components, the tendency is ...
Collapse
 
andy profile image
Andy Zhao (he/him)

Nice post! Btw you can add syntax highlighting to your codeblocks by adding a keyword (usually the language) after the first set of triple backticks. For example:

Codeblock with syntax highlighting example

Collapse
 
lisaveras profile image
LV 🏳️‍🌈

Oh sweet! I was looking for this in Help when writing the post but didn't see it. Thank you.

Collapse
 
andy profile image
Andy Zhao (he/him)

Ah good to know. We should probably add that in there.

Collapse
 
kaylyn profile image
Kaylyn • Edited

Thanks for sharing! I'm actually in the midst of creating a similar article about React.Portal for a modal I recently created so your post was very insightful! One thing I noticed with React.Portal is that the div id="portal" always seems to exist in the DOM which slightly bothered me. I've been tinkering around with appending the div to the body on componentDidMount of Modal component-- not sure if that's considered bad practice but I'm having fun trying it out. Hopefully I'll have more to share soon after some experimentation :)

Collapse
 
revskill10 profile image
Truong Hoang Dung

Does it work with SSR ?

Collapse
 
lisaveras profile image
LV 🏳️‍🌈 • Edited

I've never tried it but according to some articles I've read online it's possible. Here's an article I found where the author made it work!