{"id":13683520,"url":"https://github.com/quentin-sommer/react-useragent","last_synced_at":"2025-04-09T06:11:03.766Z","repository":{"id":21626283,"uuid":"93384085","full_name":"quentin-sommer/react-useragent","owner":"quentin-sommer","description":"Integrate user-agent detection in an idiomatic React way","archived":false,"fork":false,"pushed_at":"2023-03-01T05:00:50.000Z","size":6834,"stargazers_count":164,"open_issues_count":15,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T01:04:27.728Z","etag":null,"topics":["react","react-component","user-agent"],"latest_commit_sha":null,"homepage":"https://quentin-sommer.github.io/react-useragent/","language":"TypeScript","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/quentin-sommer.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-06-05T08:49:13.000Z","updated_at":"2023-06-22T20:36:33.000Z","dependencies_parsed_at":"2024-01-29T07:28:09.693Z","dependency_job_id":"ac75adb9-cac0-4b49-860d-2a1ab036a5f0","html_url":"https://github.com/quentin-sommer/react-useragent","commit_stats":{"total_commits":372,"total_committers":10,"mean_commits":37.2,"dds":0.3951612903225806,"last_synced_commit":"efc08e2d6515c5e1c4cdc2bd1426e39c1701ca68"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quentin-sommer%2Freact-useragent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quentin-sommer%2Freact-useragent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quentin-sommer%2Freact-useragent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quentin-sommer%2Freact-useragent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quentin-sommer","download_url":"https://codeload.github.com/quentin-sommer/react-useragent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247987285,"owners_count":21028895,"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":["react","react-component","user-agent"],"created_at":"2024-08-02T13:02:14.154Z","updated_at":"2025-04-09T06:11:03.747Z","avatar_url":"https://github.com/quentin-sommer.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-useragent\n\nIntegrate user-agent detection in an idiomatic React way.\n\n## Installation\n\n`yarn add @quentin-sommer/react-useragent` or `npm i -s @quentin-sommer/react-useragent`\n\nFor React 15 (old context) use the `2.x` version\n\n```\n// React 15\n\"dependencies\": {\n  ...\n  \"@quentin-sommer/react-useragent\": \"^2.0.0\"\n  ...\n}\n```\n\n## Introduction\n\nImagine being able to render magnificent, deep links, beautiful download buttons for your app. Well, Now you can.\n\n```js\n\u003cdiv\u003e\n  \u003cUserAgent ios\u003e\n    \u003cBeautifulIOSButton /\u003e\n  \u003c/UserAgent\u003e\n  \u003cUserAgent windows\u003e\n    \u003cBeautifulWindowsButton /\u003e\n  \u003c/UserAgent\u003e\n\u003c/div\u003e\n```\n\nreact-useragent wraps the great [UAParser.js](https://github.com/faisalman/ua-parser-js) library and make it easy to use useragent knowledge inside your React applications.\nreact-useragent provides useful shortcuts but you can always use an escape hatch in case you want to access the underlying library.\n\n[live demo](https://quentin-sommer.github.io/react-useragent/)\n\n## Usage\n\n### Next.js example\n\nThe most common question about this library is how to use it with Next.js. An [example](https://github.com/quentin-sommer/react-useragent/issues/10) is available in an issue.\n\n### Generic usage\nFirst you need to wrap your App in a `\u003cUserAgentProvider\u003e` tag.\nYou also need to pass a user agent string to `\u003cUserAgentProvider\u003e`.\nOn the browser that would be `window.navigator.userAgent`.\n\nreact-useragent works in **server side rendering** as well, just pass it the request useragent string. On express that would be `req.headers['user-agent']`.\n\n```js\nimport {UserAgentProvider} from '@quentin-sommer/react-useragent'\n\nconst App = props =\u003e (\n  \u003cUserAgentProvider ua={window.navigator.userAgent}\u003e\n    \u003cdiv\u003e{/* rest of your App */}\u003c/div\u003e\n  \u003c/UserAgentProvider\u003e\n)\n```\n\nThen use the `\u003cUserAgent\u003e` component.\n\nreact-useragent expose some props, these are optimized and using them will be faster than directly accessing the `UAParser.js` library.\n\nAvailable props for `\u003cUserAgent\u003e`\n\n- computer\n- windows\n- linux\n- mac\n- mobile\n- tablet\n- android\n- ios\n- firefox\n- chrome\n- edge\n- safari\n\nTheses props are cumulable : `\u003cUserAgent firefox mobile\u003e` will match both firefox browser and mobile systems.\n\n```js\nimport {UserAgentProvider, UserAgent} from '@quentin-sommer/react-useragent'\n\nconst App = props =\u003e (\n  \u003cUserAgentProvider ua={window.navigator.userAgent}\u003e\n    \u003cdiv\u003e\n      \u003cUserAgent mobile\u003e\n        \u003cp\u003eThis will only be rendered on mobile\u003c/p\u003e\n      \u003c/UserAgent\u003e\n    \u003c/div\u003e\n  \u003c/UserAgentProvider\u003e\n)\n```\n\nYou can also use this alternative API if you find it more convenient\n\n```js\n\u003cUserAgent mobile\u003e\n    {uaIsMobile =\u003e (\n        {uaIsMobile \u0026\u0026 \u003cp\u003eThis will ONLY be rendered on mobile\u003c/p\u003e}\n        {!uaIsMobile \u0026\u0026 \u003cp\u003eThis will NOT be rendered on mobile\u003c/p\u003e}\n    )}\n\u003c/UserAgent\u003e\n```\n\nFor full power you can always access the underlying parser with the `returnFullParser` prop\n\n```js\n\u003cUserAgent returnFullParser\u003e\n  {parser =\u003e (\n    \u003cp\u003e\n      I see you, {parser.getOS().name} {parser.getCPU().architecture}\n    \u003c/p\u003e\n  )}\n\u003c/UserAgent\u003e\n```\n\nYou can also use the library with the `useContext` hook\n\n```js\nimport {UAContext} from '@quentin-sommer/react-useragent'\nconst UsingContextHook = () =\u003e {\n  const {uaResults, parser} = useContext(UAContext)\n  return parser.getOS().name\n}\n```\n\nFor more example see the demo app source [here](https://github.com/quentin-sommer/react-useragent/blob/master/example/index.tsx)\n\nIf you have any questions don't hesitate to say hi on [Twitter](https://twitter.com/quentin_smr)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquentin-sommer%2Freact-useragent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquentin-sommer%2Freact-useragent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquentin-sommer%2Freact-useragent/lists"}