{"id":13481710,"url":"https://github.com/jonstuebe/react-useragent","last_synced_at":"2025-07-10T05:32:21.397Z","repository":{"id":57347293,"uuid":"89261614","full_name":"jonstuebe/react-useragent","owner":"jonstuebe","description":"Higher order component to add user agent information to your react components","archived":false,"fork":false,"pushed_at":"2018-12-02T18:18:18.000Z","size":102,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-30T15:51:03.402Z","etag":null,"topics":["hoc","javascript","react","reactjs","useragent"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonstuebe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-24T16:13:12.000Z","updated_at":"2024-06-01T09:57:11.000Z","dependencies_parsed_at":"2022-08-28T03:52:17.872Z","dependency_job_id":null,"html_url":"https://github.com/jonstuebe/react-useragent","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonstuebe%2Freact-useragent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonstuebe%2Freact-useragent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonstuebe%2Freact-useragent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonstuebe%2Freact-useragent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonstuebe","download_url":"https://codeload.github.com/jonstuebe/react-useragent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225622935,"owners_count":17498168,"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":["hoc","javascript","react","reactjs","useragent"],"created_at":"2024-07-31T17:00:54.582Z","updated_at":"2024-11-20T19:47:05.557Z","avatar_url":"https://github.com/jonstuebe.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Misc"],"readme":"# React User Agent\n\n## Install\n\nnpm\n\n```shell\nnpm i --save react-useragent\n```\n\nor yarn\n\n```shell\nyarn add react-useragent\n```\n\n## Importing\n\n### ES6\n\n```javascript\nimport { UserAgent } from \"react-useragent\";\n```\n\n### ES5 (CommonJS)\n\n```javascript\nconst { UserAgent } = require(\"react-useragent\");\n```\n\n### ES5 (UMD Build)\n\n```html\n\u003chead\u003e\n  \u003c!-- make sure and also include react and react-dom --\u003e\n  \u003cscript src=\"https://unpkg.com/mobile-detect@1.4.1/mobile-detect.js\" /\u003e\n  \u003cscript src=\"https://unpkg.com/react-useragent@1.1.1/lib/index.js\" /\u003e\n\u003c/head\u003e\n```\n\n```javascript\nvar UserAgent = ReactUserAgent.UserAgent;\n```\n\n## Usage\n\n### Children Function\n\n```javascript\nimport React, { Component } from 'react';\nimport { UserAgent } from 'react-useragent';\n\nclass App extends Component {\n  render() {\n    \u003cdiv\u003e\n      \u003cUserAgent\u003e\n        {({ ua }) =\u003e {\n          return ua.mobile ? \u003cinput type=\"date\" /\u003e : \u003cinput type=\"text\" /\u003e\u003e;\n        }}\n      \u003c/UserAgent\u003e\n    \u003c/div\u003e\n  }\n}\n\nexport default App;\n```\n\n### Render Prop\n\n```javascript\nimport React, { Component } from 'react';\nimport { UserAgent } from 'react-useragent';\n\nclass App extends Component {\n  render() {\n    \u003cdiv\u003e\n      \u003cUserAgent render={({ ua }) =\u003e {\n        return ua.mobile ? \u003cinput type=\"date\" /\u003e : \u003cinput type=\"text\" /\u003e\u003e;\n      }} /\u003e\n    \u003c/div\u003e\n  }\n}\n\nexport default App;\n```\n\n### HOC\n\n```javascript\nimport React, { Component } from \"react\";\nimport { withUserAgent } from \"react-useragent\";\n\nclass App extends Component {\n  render() {\n    \u003cdiv\u003e\n      {this.props.ua.mobile ? \u003cinput type=\"date\" /\u003e : \u003cinput type=\"text\" /\u003e}\n    \u003c/div\u003e;\n  }\n}\n\nexport default withUserAgent(App);\n```\n\n## API\n\nThis utility uses mobile-detect for user agent parsing. The following object is exposed to the component through props/args (depending on the usage). The key \"md\" is the actual mobile-detect constructor and is available to call any mobile-detect methods that are not included by default.\n\n```json\n{\n  \"mobile\": null,\n  \"phone\": null,\n  \"tablet\": null,\n  \"os\": null,\n  \"md\": {\n    \"ua\":\n      \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36\",\n    \"_cache\": {\n      \"phone\": null,\n      \"tablet\": null,\n      \"mobile\": null,\n      \"os\": null\n    },\n    \"maxPhoneWidth\": 600\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonstuebe%2Freact-useragent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonstuebe%2Freact-useragent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonstuebe%2Freact-useragent/lists"}