feat: useMobile hook (#422)

* feat: useMobile hook

* feat: use useLayoutEffect

* chore: update comment

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+lint-staged

package.json

@@ -20,14 +20,21 @@
     "es"
   ],
   "scripts": {
+    "build": "dumi build",
     "compile": "father build",
     "coverage": "npm test -- --coverage",
-    "build": "dumi build",
     "lint": "eslint src/ --ext .tsx,.ts & eslint tests/ --ext .js",
+    "prepare": "husky install",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "start": "dumi dev",
     "test": "rc-test"
   },
+  "lint-staged": {
+    "**/*.{js,jsx,tsx,ts,md,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "react-is": "^16.12.0"
@@ -47,6 +54,8 @@
     "eslint": "~7.32.0",
     "father": "^4.1.3",
     "glob": "^7.1.6",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.2",
     "np": "^6.2.3",
     "rc-test": "^7.0.14",
     "react": "^18.0.0",

src/hooks/useMobile.ts

@@ -0,0 +1,18 @@
+import { useLayoutEffect, useState } from 'react';
+import isMobile from '../isMobile';
+
+/**
+ * Hook to detect if the user is on a mobile device
+ * Notice that this hook will only detect the device type in effect, so it will always be false in server side
+ */
+const useMobile = (): boolean => {
+  const [mobile, setMobile] = useState(false);
+
+  useLayoutEffect(() => {
+    setMobile(isMobile());
+  }, []);
+
+  return mobile;
+};
+
+export default useMobile;

tests/hooks.test.js

@@ -1,11 +1,12 @@
+import { fireEvent, render } from '@testing-library/react';
 import * as React from 'react';
 import { renderToString } from 'react-dom/server';
-import { render, fireEvent } from '@testing-library/react';
+import useId, { resetUuid } from '../src/hooks/useId';
+import useLayoutEffect from '../src/hooks/useLayoutEffect';
 import useMemo from '../src/hooks/useMemo';
 import useMergedState from '../src/hooks/useMergedState';
-import useLayoutEffect from '../src/hooks/useLayoutEffect';
+import useMobile from '../src/hooks/useMobile';
 import useState from '../src/hooks/useState';
-import useId, { resetUuid } from '../src/hooks/useId';
 
 global.disableUseId = false;
 
@@ -498,4 +499,24 @@ describe('hooks', () => {
       global.disableUseId = false;
     });
   });
+
+  describe('useMobile', () => {
+    it('should work', () => {
+      const Demo = () => {
+        const isMobile = useMobile();
+        return <div>{isMobile ? 'mobile' : 'pc'}</div>;
+      };
+
+      const { container } = render(<Demo />);
+      expect(container.textContent).toBe('pc');
+
+      const navigatorSpy = jest
+        .spyOn(navigator, 'userAgent', 'get')
+        .mockImplementation(() => 'Android');
+      const { container: container2 } = render(<Demo />);
+      expect(container2.textContent).toBe('mobile');
+
+      navigatorSpy.mockRestore();
+    });
+  });
 });