Render Browser Specific Content with React

TL;DR — You can render browser specific content in React with a one-liner.

Have you ever wanted to put up a banner for all your IE users and ask them to try your site in Chrome/Firefox?

With RenderInBrowser component you can render content specific to browsers.

As promised in my post a few weeks back, I’ve ported the code from my other project, wrote thorough tests and created a standalone React library to render content only in specified browsers.

The syntax is too simple.

If you want to render something only in Chrome,

<RenderInBrowser only chrome>  <div>    Whoa! This super duper line will be rendered only in Chrome  </div></RenderInBrowser>

If you want to render something in all browsers except IE,

<RenderInBrowser except ie>  <div>    Darn, this stuff doesn't work in IE :(  </div></RenderInBrowser>

This library is available as an NPM package and is still in beta stage (v0.2.0) ‘coz I’d like to take feedback and improve on it before publishing v1.0.0.

Here’s the link to the GitHub repo.

If you find something that could be improved, pl drop a feedback note and I’d very much welcome it. If you don’t find anything that could be improved, you could still drop a Hi and I’ll Hi you back :)

You are amazing! Have a good day! ⚡️

Originally published at dev.to.

Render Browser Specific Content with React 🎉 was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.