Skip to content

Commit 2778014

Browse files
afiiifafiiif
committed
feat: add react-router snippets
1 parent 868a06a commit 2778014

File tree

6 files changed

+278
-0
lines changed

6 files changed

+278
-0
lines changed

‎snippets/javascript.json‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -718,6 +718,100 @@
718718
"description": "Convert import to Next.js dynamic import",
719719
"scope": "javascript,javascriptreact"
720720
},
721+
"🟨 reactRouterUseParams": {
722+
"prefix": "rou.$rou.useParams",
723+
"body": [
724+
"const { $1 } = useParams$2()"
725+
],
726+
"description": "React Router useParams",
727+
"scope": "javascript,javascriptreact"
728+
},
729+
"🟨 reactRouterUseLocation": {
730+
"prefix": "rou.$rou.useLocation",
731+
"body": [
732+
"const { pathname } = useLocation$1()"
733+
],
734+
"description": "React Router useLocation",
735+
"scope": "javascript,javascriptreact"
736+
},
737+
"🟨 reactRouterUseNavigate": {
738+
"prefix": "rou.$rou.useNavigate",
739+
"body": [
740+
"const navigate = useNavigate$1()"
741+
],
742+
"description": "React Router useNavigate",
743+
"scope": "javascript,javascriptreact"
744+
},
745+
"🟨 reactRouterUseSearchParams": {
746+
"prefix": "rou.$rou.useSearchParams",
747+
"body": [
748+
"const [searchParams, setSearchParams] = useSearchParams$1()"
749+
],
750+
"description": "React Router useSearchParams",
751+
"scope": "javascript,javascriptreact"
752+
},
753+
"🟨 reactRouterCreate": {
754+
"prefix": "rou.$rou.createBrowserRouter",
755+
"body": [
756+
"const router = createBrowserRouter([",
757+
"\t{",
758+
"\t\tpath: \"/$1\",",
759+
"\t\telement: <${2:Root} />,",
760+
"\t\terrorElement: <ErrorPage />,",
761+
"\t\tloader: rootLoader,$3",
762+
"\t},",
763+
"])",
764+
""
765+
],
766+
"description": "React Router v6 createBrowserRouter",
767+
"scope": "javascript,javascriptreact"
768+
},
769+
"🟨 reactRouterChildren": {
770+
"prefix": "rou.$rou.children",
771+
"body": [
772+
"children: [",
773+
"\t{",
774+
"\t\tpath: \"$1\",",
775+
"\t\telement: <${2:DetailPage} />,",
776+
"\t\tloader: ${3:detailPageLoader},",
777+
"\t},",
778+
"],"
779+
],
780+
"description": "React Router v6 router children",
781+
"scope": "javascript,javascriptreact"
782+
},
783+
"🟨 reactRouterUseRouterError": {
784+
"prefix": "rou.$rou.useRouteError",
785+
"body": [
786+
"const error = useRouteError()"
787+
],
788+
"description": "React Router v6 useRouteError",
789+
"scope": "javascript,javascriptreact"
790+
},
791+
"🟨 reactRouterUseLoaderData": {
792+
"prefix": "rou.$rou.useLoaderData",
793+
"body": [
794+
"const { $1 } = useLoaderData$2()"
795+
],
796+
"description": "React Router v6 useLoaderData",
797+
"scope": "javascript,javascriptreact"
798+
},
799+
"🟨 reactRouterUseNavigation": {
800+
"prefix": "rou.$rou.useNavigation",
801+
"body": [
802+
"const { ${1:state, location} } = useNavigation$2()"
803+
],
804+
"description": "React Router v6 useNavigation",
805+
"scope": "javascript,javascriptreact"
806+
},
807+
"🟨 reactRouterUseHistory": {
808+
"prefix": "rou.$rou.useHistory",
809+
"body": [
810+
"const { ${1:location, push, replace, goBack} } = useHistory$2()"
811+
],
812+
"description": "React Router v5 useHistory",
813+
"scope": "javascript,javascriptreact"
814+
},
721815
"🟨 rqQuery": {
722816
"prefix": "rqUseQue.$rqUseQue",
723817
"body": [

‎snippets/typescript.json‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1015,6 +1015,100 @@
10151015
"description": "Next.js getStaticPaths arrow function",
10161016
"scope": "javascript,typescript,javascriptreact,typescriptreact"
10171017
},
1018+
"🟨 reactRouterUseParams": {
1019+
"prefix": "rou.$rou.useParams",
1020+
"body": [
1021+
"const { $1 } = useParams$2()"
1022+
],
1023+
"description": "React Router useParams",
1024+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1025+
},
1026+
"🟨 reactRouterUseLocation": {
1027+
"prefix": "rou.$rou.useLocation",
1028+
"body": [
1029+
"const { pathname } = useLocation$1()"
1030+
],
1031+
"description": "React Router useLocation",
1032+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1033+
},
1034+
"🟨 reactRouterUseNavigate": {
1035+
"prefix": "rou.$rou.useNavigate",
1036+
"body": [
1037+
"const navigate = useNavigate$1()"
1038+
],
1039+
"description": "React Router useNavigate",
1040+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1041+
},
1042+
"🟨 reactRouterUseSearchParams": {
1043+
"prefix": "rou.$rou.useSearchParams",
1044+
"body": [
1045+
"const [searchParams, setSearchParams] = useSearchParams$1()"
1046+
],
1047+
"description": "React Router useSearchParams",
1048+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1049+
},
1050+
"🟨 reactRouterCreate": {
1051+
"prefix": "rou.$rou.createBrowserRouter",
1052+
"body": [
1053+
"const router = createBrowserRouter([",
1054+
"\t{",
1055+
"\t\tpath: \"/$1\",",
1056+
"\t\telement: <${2:Root} />,",
1057+
"\t\terrorElement: <ErrorPage />,",
1058+
"\t\tloader: rootLoader,$3",
1059+
"\t},",
1060+
"])",
1061+
""
1062+
],
1063+
"description": "React Router v6 createBrowserRouter",
1064+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1065+
},
1066+
"🟨 reactRouterChildren": {
1067+
"prefix": "rou.$rou.children",
1068+
"body": [
1069+
"children: [",
1070+
"\t{",
1071+
"\t\tpath: \"$1\",",
1072+
"\t\telement: <${2:DetailPage} />,",
1073+
"\t\tloader: ${3:detailPageLoader},",
1074+
"\t},",
1075+
"],"
1076+
],
1077+
"description": "React Router v6 router children",
1078+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1079+
},
1080+
"🟨 reactRouterUseRouterError": {
1081+
"prefix": "rou.$rou.useRouteError",
1082+
"body": [
1083+
"const error = useRouteError()"
1084+
],
1085+
"description": "React Router v6 useRouteError",
1086+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1087+
},
1088+
"🟨 reactRouterUseLoaderData": {
1089+
"prefix": "rou.$rou.useLoaderData",
1090+
"body": [
1091+
"const { $1 } = useLoaderData$2()"
1092+
],
1093+
"description": "React Router v6 useLoaderData",
1094+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1095+
},
1096+
"🟨 reactRouterUseNavigation": {
1097+
"prefix": "rou.$rou.useNavigation",
1098+
"body": [
1099+
"const { ${1:state, location} } = useNavigation$2()"
1100+
],
1101+
"description": "React Router v6 useNavigation",
1102+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1103+
},
1104+
"🟨 reactRouterUseHistory": {
1105+
"prefix": "rou.$rou.useHistory",
1106+
"body": [
1107+
"const { ${1:location, push, replace, goBack} } = useHistory$2()"
1108+
],
1109+
"description": "React Router v5 useHistory",
1110+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1111+
},
10181112
"🟨 rqQuery": {
10191113
"prefix": "rqUseQue.$rqUseQue",
10201114
"body": [

‎src/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ const reactNative = normalizeSnippets(require('./snippets/react-native'));
1313

1414
const next = normalizeSnippets(require('./snippets/next'));
1515
const nextTS = normalizeSnippets(require('./snippets/next-ts'), true);
16+
const reactRouter = normalizeSnippets(require('./snippets/react-router'));
17+
const reactRouterV6 = normalizeSnippets(require('./snippets/react-router-v6'));
18+
const reactRouterV5 = normalizeSnippets(require('./snippets/react-router-v5'));
1619
const reactQuery = normalizeSnippets(require('./snippets/react-query'));
1720
const swr = normalizeSnippets(require('./snippets/swr'));
1821
const reactHookForm = normalizeSnippets(require('./snippets/react-hook-form'));
@@ -39,6 +42,9 @@ const javascriptSnippets = {
3942
...reactHook,
4043
...reactNative,
4144
...next,
45+
...reactRouter,
46+
...reactRouterV6,
47+
...reactRouterV5,
4248
...reactQuery,
4349
...swr,
4450
...reactHookForm,
@@ -60,6 +66,9 @@ const typescriptSnippets = {
6066
...reactNative,
6167
...next,
6268
...nextTS,
69+
...reactRouter,
70+
...reactRouterV6,
71+
...reactRouterV5,
6372
...reactQuery,
6473
...swr,
6574
...reactHookForm,

‎src/snippets/react-router-v5.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Snippet } from '../types';
2+
3+
export const reactRouterUseHistory: Snippet = {
4+
prefix: ['rou', 'useHistory'],
5+
body: ['const { ${1:location, push, replace, goBack} } = useHistory$2()'],
6+
description: 'React Router v5 useHistory',
7+
};

‎src/snippets/react-router-v6.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Snippet } from '../types';
2+
3+
export const reactRouterCreate: Snippet = {
4+
prefix: ['rou', 'createBrowserRouter'],
5+
body: [
6+
'const router = createBrowserRouter([',
7+
'\t{',
8+
'\t\tpath: "/$1",',
9+
'\t\telement: <${2:Root} />,',
10+
'\t\terrorElement: <ErrorPage />,',
11+
'\t\tloader: rootLoader,$3',
12+
'\t},',
13+
'])',
14+
'',
15+
],
16+
description: 'React Router v6 createBrowserRouter',
17+
};
18+
19+
export const reactRouterChildren: Snippet = {
20+
prefix: ['rou', 'children'],
21+
body: [
22+
'children: [',
23+
'\t{',
24+
'\t\tpath: "$1",',
25+
'\t\telement: <${2:DetailPage} />,',
26+
'\t\tloader: ${3:detailPageLoader},',
27+
'\t},',
28+
'],',
29+
],
30+
description: 'React Router v6 router children',
31+
};
32+
33+
export const reactRouterUseRouterError: Snippet = {
34+
prefix: ['rou', 'useRouteError'],
35+
body: ['const error = useRouteError()'],
36+
description: 'React Router v6 useRouteError',
37+
};
38+
39+
export const reactRouterUseLoaderData: Snippet = {
40+
prefix: ['rou', 'useLoaderData'],
41+
body: ['const { $1 } = useLoaderData$2()'],
42+
description: 'React Router v6 useLoaderData',
43+
};
44+
45+
export const reactRouterUseNavigation: Snippet = {
46+
prefix: ['rou', 'useNavigation'],
47+
body: ['const { ${1:state, location} } = useNavigation$2()'],
48+
description: 'React Router v6 useNavigation',
49+
};

‎src/snippets/react-router.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Snippet } from '../types';
2+
3+
export const reactRouterUseParams: Snippet = {
4+
prefix: ['rou', 'useParams'],
5+
body: ['const { $1 } = useParams$2()'],
6+
description: 'React Router useParams',
7+
};
8+
9+
export const reactRouterUseLocation: Snippet = {
10+
prefix: ['rou', 'useLocation'],
11+
body: ['const { pathname } = useLocation$1()'],
12+
description: 'React Router useLocation',
13+
};
14+
15+
export const reactRouterUseNavigate: Snippet = {
16+
prefix: ['rou', 'useNavigate'],
17+
body: ['const navigate = useNavigate$1()'],
18+
description: 'React Router useNavigate',
19+
};
20+
21+
export const reactRouterUseSearchParams: Snippet = {
22+
prefix: ['rou', 'useSearchParams'],
23+
body: ['const [searchParams, setSearchParams] = useSearchParams$1()'],
24+
description: 'React Router useSearchParams',
25+
};

0 commit comments

Comments
 (0)