A React component to render browser specific content
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config Setup RenderInBrowser Component May 27, 2018
examples Fix: Babel should use `env` preset Jun 1, 2018
src Remove blink from Readme and proptypes Jun 1, 2018
.babelrc Setup RenderInBrowser Component May 27, 2018
.eslintrc RenderInBrowser ready :) May 27, 2018
.gitignore Setup RenderInBrowser Component May 27, 2018
.npmignore Add npmignore file May 27, 2018
.travis.yml Add travis script May 27, 2018
LICENSE Setup RenderInBrowser Component May 27, 2018
README.md
index.js Setup RenderInBrowser Component May 27, 2018
package.json 1.0.0 Jun 1, 2018
webpack.config.babel.js Fix: Babel should use `env` preset Jun 1, 2018

README.md

React Render In Browser Component

Build Status npm version License: MIT

A React component that helps you render browser specific content.

Why? start with 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.

API

Browsers

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

  1. chrome
  2. firefox
  3. safari
  4. opera
  5. ie
  6. edge
  7. 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>

License

MIT © Dinesh Pandiyan