{"id":16736150,"url":"https://github.com/flexdinesh/react-render-in-browser","last_synced_at":"2025-03-31T06:05:57.884Z","repository":{"id":51663948,"uuid":"135015121","full_name":"flexdinesh/react-render-in-browser","owner":"flexdinesh","description":"React library to render browser specific content","archived":false,"fork":false,"pushed_at":"2021-05-10T20:26:10.000Z","size":1524,"stargazers_count":159,"open_issues_count":11,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-18T13:19:53.601Z","etag":null,"topics":["browser","component","npm-package","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flexdinesh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-27T04:19:41.000Z","updated_at":"2022-12-25T17:24:44.000Z","dependencies_parsed_at":"2022-08-22T03:20:32.653Z","dependency_job_id":null,"html_url":"https://github.com/flexdinesh/react-render-in-browser","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexdinesh%2Freact-render-in-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexdinesh%2Freact-render-in-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexdinesh%2Freact-render-in-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexdinesh%2Freact-render-in-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flexdinesh","download_url":"https://codeload.github.com/flexdinesh/react-render-in-browser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246320131,"owners_count":20758410,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","component","npm-package","react"],"created_at":"2024-10-13T00:08:29.362Z","updated_at":"2025-03-31T06:05:57.862Z","avatar_url":"https://github.com/flexdinesh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Render In Browser Component\r\n\r\n[![Build Status](https://travis-ci.org/flexdinesh/react-render-in-browser.svg?branch=master)](https://travis-ci.org/flexdinesh/react-render-in-browser)\r\n[![npm version](https://badge.fury.io/js/react-render-in-browser.svg)](https://www.npmjs.com/package/react-render-in-browser)\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\r\n\r\nA React component that helps you render browser specific content.\r\n\r\n## Why? [![start with why](https://img.shields.io/badge/start%20with-why%3F-brightgreen.svg?style=flat)](http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action)\r\n\r\nEver wanted to put up a banner for all your IE users and ask them to try your site in Chrome/Firefox?\r\n\r\nWith **RenderInBrowser** component you can render content specific to browsers. 🎉\r\n\r\n```jsx\r\n\u003cRenderInBrowser ie only\u003e\r\n  \u003cdiv\u003eAll the magic tricks in this site work best in Chrome/Firefox!\u003c/div\u003e\r\n\u003c/RenderInBrowser\u003e\r\n```\r\n\r\n## Install\r\n\r\n```\r\n$ npm install --save react-render-in-browser\r\n```\r\n\r\n## Usage\r\n\r\n```jsx\r\nimport RenderInBrowser from 'react-render-in-browser';\r\n\r\nconst Example = () =\u003e {\r\n  return (\r\n    \u003cdiv\u003e\r\n      \u003cRenderInBrowser ie only\u003e\r\n        \u003cdiv\u003eUgh, our super duper animation won't work in IE\u003c/div\u003e\r\n      \u003c/RenderInBrowser\u003e\r\n      \u003cRenderInBrowser except firefox safari\u003e\r\n        \u003cdiv\u003eWhy don't you use Firefox or Safari?\u003c/div\u003e\r\n      \u003c/RenderInBrowser\u003e\r\n      \u003cRenderInBrowser chrome firefox only\u003e\r\n        \u003cdiv\u003eI like Chrome and Firefox\u003c/div\u003e\r\n      \u003c/RenderInBrowser\u003e\r\n    \u003c/div\u003e\r\n  );\r\n};\r\n```\r\n\r\nThe div `Ugh, our super duper animation won't work in IE` will be rendered only in IE.\r\n\r\nThe div `Why don't you use Firefox or Safari?` will be rendered in all browsers except Firefox and Safari.\r\n\r\nThe div `I like Chrome and Firefox` will be rendered only in Chrome or Firefox.\r\n\r\n## API\r\n\r\n- [Browsers](#browsers)\r\n- [Conditions](#conditions)\r\n\r\n### Browsers\r\n\r\nThe following browsers are supported as prop types and they are **case-sensitive**.\r\n\r\n1. chrome\r\n2. firefox\r\n3. safari\r\n4. opera\r\n5. ie\r\n6. edge\r\n7. mobile\r\n\r\nNote 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.\r\n\r\n### Conditions\r\n\r\nThe following conditions are supported as prop types and they are **case-sensitive**.\r\n\r\n#### only\r\n\r\nWhen **only** is used, the children will render only in browsers passed as props.\r\n\r\n```jsx\r\n\u003cRenderInBrowser ie edge only\u003e\r\n  \u003cdiv\u003eRenderded only in IE and Edge\u003c/div\u003e\r\n\u003c/RenderInBrowser\u003e\r\n```\r\n\r\n#### except\r\n\r\nWhen **except** is used, the children will render in all browsers except those that are passed as props.\r\n\r\n```jsx\r\n\u003cRenderInBrowser except safari\u003e\r\n  \u003cdiv\u003eRendered in all except safari\u003c/div\u003e\r\n\u003c/RenderInBrowser\u003e\r\n```\r\n\r\n## License\r\n\r\nMIT © Dinesh Pandiyan\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexdinesh%2Freact-render-in-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflexdinesh%2Freact-render-in-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexdinesh%2Freact-render-in-browser/lists"}