feat: improve react custom hook snippet

Author: afiiif

snippets/javascript.json

@@ -466,7 +466,7 @@
     "scope": "javascript,javascriptreact"
   },
   "🟨 reactCustomHook": {
-    "prefix": "rfhook.$rfhook.hook",
+    "prefix": "rFHook.$rFHook.hook",
     "body": [
       "import { useEffect } from 'react'",
       "",
@@ -484,7 +484,7 @@
     "scope": "javascript,javascriptreact"
   },
   "🟨 reactCustomHookArrowFn": {
-    "prefix": "rafhook.$rafhook.hook",
+    "prefix": "rAFHook.$rAFHook.hook",
     "body": [
       "import { useEffect } from 'react'",
       "",
@@ -500,7 +500,25 @@
       "",
       "export default $1"
     ],
-    "description": "React create custom hook",
+    "description": "React create custom hook arrow function",
+    "scope": "javascript,javascriptreact"
+  },
+  "🟨 reactCustomHookArrowFnExport": {
+    "prefix": "rAFHookEx.$rAFHookEx.hook",
+    "body": [
+      "import { useEffect } from 'react'",
+      "",
+      "export const ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|([\\w\\-_]*)/${3:/camelcase}/g}} = () => {",
+      "\t${0:// code}",
+      "\t",
+      "\tuseEffect(() => {",
+      "\t\t// code",
+      "\t}, [])",
+      "\t",
+      "\treturn null",
+      "}"
+    ],
+    "description": "React create custom hook arrow function",
     "scope": "javascript,javascriptreact"
   },
   "🟨 nextSSR": {

snippets/typescript.json

@@ -610,7 +610,7 @@
     "scope": "javascript,typescript,javascriptreact,typescriptreact"
   },
   "🟨 reactCustomHook": {
-    "prefix": "rfhook.$rfhook.hook",
+    "prefix": "rFHook.$rFHook.hook",
     "body": [
       "import { useEffect } from 'react'",
       "",
@@ -628,7 +628,7 @@
     "scope": "javascript,typescript,javascriptreact,typescriptreact"
   },
   "🟨 reactCustomHookArrowFn": {
-    "prefix": "rafhook.$rafhook.hook",
+    "prefix": "rAFHook.$rAFHook.hook",
     "body": [
       "import { useEffect } from 'react'",
       "",
@@ -644,7 +644,25 @@
       "",
       "export default $1"
     ],
-    "description": "React create custom hook",
+    "description": "React create custom hook arrow function",
+    "scope": "javascript,typescript,javascriptreact,typescriptreact"
+  },
+  "🟨 reactCustomHookArrowFnExport": {
+    "prefix": "rAFHookEx.$rAFHookEx.hook",
+    "body": [
+      "import { useEffect } from 'react'",
+      "",
+      "export const ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|([\\w\\-_]*)/${3:/camelcase}/g}} = () => {",
+      "\t${0:// code}",
+      "\t",
+      "\tuseEffect(() => {",
+      "\t\t// code",
+      "\t}, [])",
+      "\t",
+      "\treturn null",
+      "}"
+    ],
+    "description": "React create custom hook arrow function",
     "scope": "javascript,typescript,javascriptreact,typescriptreact"
   },
   "🟦 TS UseState": {

src/snippets/react-hook.ts

@@ -74,7 +74,7 @@ export const useCallback: Snippet = {
 };
 
 export const reactCustomHook: Snippet = {
-  prefix: ['rfhook', 'hook'],
+  prefix: ['rFHook', 'hook'],
   body: [
     "import { useEffect } from 'react'",
     '',
@@ -92,7 +92,7 @@ export const reactCustomHook: Snippet = {
 };
 
 export const reactCustomHookArrowFn: Snippet = {
-  prefix: ['rafhook', 'hook'],
+  prefix: ['rAFHook', 'hook'],
   body: [
     "import { useEffect } from 'react'",
     '',
@@ -108,5 +108,23 @@ export const reactCustomHookArrowFn: Snippet = {
     '',
     'export default $1',
   ],
-  description: 'React create custom hook',
+  description: 'React create custom hook arrow function',
+};
+
+export const reactCustomHookArrowFnExport: Snippet = {
+  prefix: ['rAFHookEx', 'hook'],
+  body: [
+    "import { useEffect } from 'react'",
+    '',
+    `export const \${1:${FILENAME_CAMELCASE}} = () => {`,
+    '\t${0:// code}',
+    '\t',
+    '\tuseEffect(() => {',
+    '\t\t// code',
+    '\t}, [])',
+    '\t',
+    '\treturn null',
+    '}',
+  ],
+  description: 'React create custom hook arrow function',
 };