fix: rewrite with functional component api

oflisback · Mar 12, 2023 · d322a4f · d322a4f
1 parent e428b69
commit d322a4f
Show file tree

Hide file tree

Showing 8 changed files with 246 additions and 264 deletions.
diff --git a/example/.eslintrc.cjs b/example/.eslintrc.cjs
@@ -4,19 +4,23 @@ module.exports = {
     es2021: true,
   },
   extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
   ],
   overrides: [],
-  parser: "@typescript-eslint/parser",
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
+    ecmaVersion: 'latest',
+    sourceType: 'module',
   },
-  plugins: ["react", "@typescript-eslint"],
+  plugins: ['react', 'react-hooks', '@typescript-eslint'],
   rules: {
-    "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off",
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
   },
-};
+  settings: {
+    react: { version: 'detect' },
+  },
+}
diff --git a/example/package.json b/example/package.json
@@ -22,6 +22,7 @@
     "@vitejs/plugin-react": "^3.1.0",
     "eslint": "^8.36.0",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.8.4",
     "typescript": "^4.9.3",
     "vite": "^4.1.0"

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -153,6 +153,7 @@ const App = () => {
               type='number'
               value={alertCount ? alertCount : 0}
               onChange={(e) => setAlertCount(parseInt(e.target.value))}
+              style={{ width: '35px', marginLeft: '10px' }}
             />
           </div>
           <div style={{ alignItems: 'center', display: 'flex' }}>
@@ -190,9 +191,12 @@ const App = () => {
                     margin: '2px',
                     width: '25px',
                     height: '20px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
                   }}
                 >
-                  {size}
+                  <div style={{ height: '16px' }}>{size}</div>
                 </div>
               )
             )}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/react-favicon.d.ts b/react-favicon.d.ts
@@ -15,6 +15,6 @@ export interface FaviconProps {
   readonly iconSize?: number
 }
 
-declare const Favicon: React.Component<FaviconProps>
+declare const Favicon: React.SFC<FaviconProps>
 
 export default Favicon
diff --git a/src/index.js b/src/index.js