https://github.com/dbish6/detect-if-mobile
This is a dependency which is a small utility to check if a user is on a mobile device in a comprehensive way.
https://github.com/dbish6/detect-if-mobile
dependency detect detection javascript jest npm npm-package typescript
Last synced: 10 months ago
JSON representation
This is a dependency which is a small utility to check if a user is on a mobile device in a comprehensive way.
- Host: GitHub
- URL: https://github.com/dbish6/detect-if-mobile
- Owner: dBish6
- License: mit
- Created: 2024-02-10T19:40:20.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-31T20:10:54.000Z (almost 2 years ago)
- Last Synced: 2025-03-08T01:48:44.842Z (10 months ago)
- Topics: dependency, detect, detection, javascript, jest, npm, npm-package, typescript
- Language: TypeScript
- Homepage:
- Size: 240 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.txt
- License: LICENSE
Awesome Lists containing this project
README
# detect-if-mobile
A small utility to check if a user is on a mobile device in a comprehensive way.
## Installation
This package works as long as you're running it in the browser. It seamlessly integrates with front-end environments and frameworks, including Vanilla, Vue, React, and more.
```
$ npm i detect-if-mobile
```
## Examples
These are a few common use cases. The package is flexible and not restricted to these examples.
**Returns a boolean:** *true for mobile, false not mobile*.
### React
```
import { useEffect } from "react";
import { isMobile } from "detect-if-mobile";
import { useGlobalContext } from "@contexts/GlobalContext";
const isMobileExample = () => {
const { isMobileRef } = useGlobalContext(); // You don't need to use a context, you can just store it in a variable, ref or state.
useEffect(() => {
isMobileRef.current = isMobile(); // Now you can use this throughout your app!
}, [])
}
export default isMobileExample;
```
### Vue
```
import { ref, onMounted, onBeforeUnmount } from "vue";
import { isMobile } from "detect-if-mobile";
export default {
setup() {
const isMobileRef = ref(false);
const detectIfMobile = () => {
isMobileRef.value = isMobile();
};
onMounted(() => {
detectIfMobile();
window.addEventListener("resize", detectIfMobile); // You can also use a resize listener, although it is not very necessary.
});
onBeforeUnmount(() => {
window.removeEventListener("resize", detectIfMobile);
});
return {
isMobile: isMobileRef
};
}
};
```
### Other
```
const { isMobile } = require("detect-if-mobile");
if (isMobile()) {
console.log("This is a mobile device.");
} else {
console.log("This is not a mobile device.");
}
```
## Contributing
Contributions are welcome! Although I'd like to keep this package as small as possible since it is meant to be a small utility.
### To Get Started
- Fork this repository.
- Create a new branch.
- install the dependencies with `npm install`.
- Do a `npm run test` to see if you're all set.
- For the dev environment, `npm run dev` and there you go!
```
$ npm install
$ npm run test
$ npm run dev
```
## License
This project is licensed under the [MIT](https://github.com/dBish6/detect-if-mobile/blob/master/LICENSE) License.
## Support Me
If you find this package helpful consider buying me a coffee, your support helps me stay motivated!
