Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/quentin-sommer/react-useragent
Integrate user-agent detection in an idiomatic React way
https://github.com/quentin-sommer/react-useragent
react react-component user-agent
Last synced: 3 months ago
JSON representation
Integrate user-agent detection in an idiomatic React way
- Host: GitHub
- URL: https://github.com/quentin-sommer/react-useragent
- Owner: quentin-sommer
- License: mit
- Created: 2017-06-05T08:49:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T05:00:50.000Z (over 1 year ago)
- Last Synced: 2024-04-29T22:07:01.374Z (7 months ago)
- Topics: react, react-component, user-agent
- Language: TypeScript
- Homepage: https://quentin-sommer.github.io/react-useragent/
- Size: 6.52 MB
- Stars: 164
- Watchers: 2
- Forks: 13
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-useragent
Integrate user-agent detection in an idiomatic React way.
## Installation
`yarn add @quentin-sommer/react-useragent` or `npm i -s @quentin-sommer/react-useragent`
For React 15 (old context) use the `2.x` version
```
// React 15
"dependencies": {
...
"@quentin-sommer/react-useragent": "^2.0.0"
...
}
```
## Introduction
Imagine being able to render magnificent, deep links, beautiful download buttons for your app. Well, Now you can.
```js
```
react-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.
react-useragent provides useful shortcuts but you can always use an escape hatch in case you want to access the underlying library.
[live demo](https://quentin-sommer.github.io/react-useragent/)
## Usage
### Next.js example
The 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.
### Generic usage
First you need to wrap your App in a `` tag.
You also need to pass a user agent string to ``.
On the browser that would be `window.navigator.userAgent`.
react-useragent works in **server side rendering** as well, just pass it the request useragent string. On express that would be `req.headers['user-agent']`.
```js
import {UserAgentProvider} from '@quentin-sommer/react-useragent'
const App = props => (
{/* rest of your App */}
)
```
Then use the `` component.
react-useragent expose some props, these are optimized and using them will be faster than directly accessing the `UAParser.js` library.
Available props for ``
- computer
- windows
- linux
- mac
- mobile
- tablet
- android
- ios
- firefox
- chrome
- edge
- safari
Theses props are cumulable : `` will match both firefox browser and mobile systems.
```js
import {UserAgentProvider, UserAgent} from '@quentin-sommer/react-useragent'
const App = props => (
This will only be rendered on mobile
)
```
You can also use this alternative API if you find it more convenient
```js
{uaIsMobile => (
{uaIsMobile &&
This will ONLY be rendered on mobile
}
{!uaIsMobile && This will NOT be rendered on mobile
}
)}
```
For full power you can always access the underlying parser with the `returnFullParser` prop
```js
{parser => (
I see you, {parser.getOS().name} {parser.getCPU().architecture}
)}
```
You can also use the library with the `useContext` hook
```js
import {UAContext} from '@quentin-sommer/react-useragent'
const UsingContextHook = () => {
const {uaResults, parser} = useContext(UAContext)
return parser.getOS().name
}
```
For more example see the demo app source [here](https://github.com/quentin-sommer/react-useragent/blob/master/example/index.tsx)
If you have any questions don't hesitate to say hi on [Twitter](https://twitter.com/quentin_smr)