React Render In Browser Component

A React component that helps you render browser specific content.

Why?

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. 🎉

<RenderInBrowser ie only>
  <div>All the magic tricks in this site work best in Chrome/Firefox!</div>
</RenderInBrowser>

Install

$ npm install --save react-render-in-browser

Usage

import RenderInBrowser from 'react-render-in-browser';

const Example = () => {
  return (
    <div>
      <RenderInBrowser ie only>
        <div>Ugh, our super duper animation won't work in IE</div>
      </RenderInBrowser>
      <RenderInBrowser except firefox safari>
        <div>Why don't you use Firefox or Safari?</div>
      </RenderInBrowser>
      <RenderInBrowser chrome firefox only>
        <div>I like Chrome and Firefox</div>
      </RenderInBrowser>
    </div>
  );
};

The div Ugh, our super duper animation won't work in IE will be rendered only in IE.

The div Why don't you use Firefox or Safari? will be rendered in all browsers except Firefox and Safari.

The div I like Chrome and Firefox will be rendered only in Chrome or Firefox.

Browsers

The following browsers are supported as prop types and they are case-sensitive.

chrome
firefox
safari
opera
ie
edge
mobile

Note that mobile is a type of browser. Desktop chrome and mobile chrome are not the same although they share the same name. They are built independent of each other and what necessarily works in Desktop Chrome might not necessarily work in mobile Chrome. Most mobile browsers behave the same and identifying them apart is a bit tricky and thus we're grouping all mobile browsers into one.

Conditions

The following conditions are supported as prop types and they are case-sensitive.

only

When only is used, the children will render only in browsers passed as props.

<RenderInBrowser ie edge only>
  <div>Renderded only in IE and Edge</div>
</RenderInBrowser>

except

When except is used, the children will render in all browsers except those that are passed as props.

<RenderInBrowser except safari>
  <div>Rendered in all except safari</div>
</RenderInBrowser>