https://github.com/flexdinesh/react-render-in-browser
React library to render browser specific content
https://github.com/flexdinesh/react-render-in-browser
browser component npm-package react
Last synced: 10 months ago
JSON representation
React library to render browser specific content
- Host: GitHub
- URL: https://github.com/flexdinesh/react-render-in-browser
- Owner: flexdinesh
- License: mit
- Created: 2018-05-27T04:19:41.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-10T20:26:10.000Z (over 4 years ago)
- Last Synced: 2025-03-18T13:19:53.601Z (10 months ago)
- Topics: browser, component, npm-package, react
- Language: JavaScript
- Homepage:
- Size: 1.45 MB
- Stars: 159
- Watchers: 5
- Forks: 11
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Render In Browser Component
[](https://travis-ci.org/flexdinesh/react-render-in-browser)
[](https://www.npmjs.com/package/react-render-in-browser)
[](https://opensource.org/licenses/MIT)
A React component that helps you render browser specific content.
## Why? [](http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action)
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. 🎉
```jsx
All the magic tricks in this site work best in Chrome/Firefox!
```
## Install
```
$ npm install --save react-render-in-browser
```
## Usage
```jsx
import RenderInBrowser from 'react-render-in-browser';
const Example = () => {
return (
Ugh, our super duper animation won't work in IE
Why don't you use Firefox or Safari?
I like Chrome and Firefox
);
};
```
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](#browsers)
- [Conditions](#conditions)
### 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.
```jsx
Renderded only in IE and Edge
```
#### except
When **except** is used, the children will render in all browsers except those that are passed as props.
```jsx
Rendered in all except safari
```
## License
MIT © Dinesh Pandiyan