All Projects → flexdinesh → React Render In Browser

flexdinesh / React Render In Browser

Licence: mit
React library to render browser specific content

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Render In Browser

Reactopt
A CLI React performance optimization tool that identifies potential unnecessary re-rendering
Stars: ✭ 1,975 (+1157.96%)
Mutual labels:  npm-package, component
Filter Console
Filter out unwanted `console.log()` output
Stars: ✭ 203 (+29.3%)
Mutual labels:  npm-package, browser
Browser Kit
The BrowserKit component simulates the behavior of a web browser, allowing you to make requests, click on links and submit forms programmatically.
Stars: ✭ 2,563 (+1532.48%)
Mutual labels:  component, browser
Xmpp.js
XMPP for JavaScript
Stars: ✭ 2,006 (+1177.71%)
Mutual labels:  component, browser
Dom99
Extend html with directives
Stars: ✭ 37 (-76.43%)
Mutual labels:  component, browser
Ky Universal
Use Ky in both Node.js and browsers
Stars: ✭ 421 (+168.15%)
Mutual labels:  npm-package, browser
Slugify
Slugify a string
Stars: ✭ 2,110 (+1243.95%)
Mutual labels:  npm-package, browser
React Infinite Scroll Component
An awesome Infinite Scroll component in react.
Stars: ✭ 1,235 (+686.62%)
Mutual labels:  npm-package, component
Crypto Hash
Tiny hashing module that uses the native crypto API in Node.js and the browser
Stars: ✭ 501 (+219.11%)
Mutual labels:  npm-package, browser
Tfjs Yolo Tiny
In-Browser Object Detection using Tiny YOLO on Tensorflow.js
Stars: ✭ 465 (+196.18%)
Mutual labels:  npm-package, browser
Pannellum React
React Component for Pannellum (open source panorama viewer for the web)
Stars: ✭ 48 (-69.43%)
Mutual labels:  npm-package, component
Container Query
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.
Stars: ✭ 119 (-24.2%)
Mutual labels:  component, browser
Cast Sh
📟 An instance of your terminal in your browser
Stars: ✭ 151 (-3.82%)
Mutual labels:  browser
React Native Animated Linear Gradient
Animated linear gradient as background animation or something else.
Stars: ✭ 153 (-2.55%)
Mutual labels:  component
Filesystem
FileSystem is an application that allows you to browse the content of your iPhone disk, displaying file and folders, files contents, and detailed informations about file and folder permissions.
Stars: ✭ 148 (-5.73%)
Mutual labels:  browser
Homebridge Wol
A Wake on Lan plugin for Homebridge
Stars: ✭ 150 (-4.46%)
Mutual labels:  npm-package
Do Not Disturb
Control the macOS `Do Not Disturb` feature
Stars: ✭ 155 (-1.27%)
Mutual labels:  npm-package
Gloria
Gloria is a static website generator, based on NodeJS.
Stars: ✭ 153 (-2.55%)
Mutual labels:  npm-package
Link Fix
我的浏览器 UserScript 脚本仓库,这里是数个独立的 UserScript 浏览器脚本,为浏览器实现了各种强大的的功能。我的 greasyfork 主页:
Stars: ✭ 150 (-4.46%)
Mutual labels:  browser
React Svg Map
A set of React.js components to display an interactive SVG map
Stars: ✭ 150 (-4.46%)
Mutual labels:  component

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].