Skip to content

Commit 2ac4c1a

Browse files
alDuncansonalDuncanson
committed
Update README and snippets to reorganize and include additional React hooks
1 parent 49f2601 commit 2ac4c1a

File tree

2 files changed

+89
-76
lines changed

2 files changed

+89
-76
lines changed

‎README.md‎

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,51 +4,70 @@
44

55
# React Hooks Snippets
66

7-
React Hooks Snippets is a [Visual Studio Code](https://code.visualstudio.com/) extension to make writing ReactJS [Hooks](https://react.dev/reference/react/hooks) easier and faster!
7+
React Hooks Snippets is a [Visual Studio Code](https://code.visualstudio.com/) extension to make writing [React Hooks](https://react.dev/reference/react/hooks) easier and faster!
88

99

10-
## Supported Snippets
10+
## Supported Hooks
1111

12+
### State Hooks
1213
| Prefix | Snippet |
1314
| ------------- | ------------- |
1415
| `ush` | `useState` |
15-
| `uth` | `useTransitionHook` |
16-
| `udvh` | `useDeferredValue` |
17-
| `udbvh` | `useDebugValue` |
18-
| `uidh` | `useId` |
19-
| `usesh` | `useSyncExternalStore` |
20-
| `uash` | `useActionState` |
16+
| `urdh` | `useReducer` |
17+
18+
### Context Hooks
19+
| Prefix | Snippet |
20+
| ------------- | ------------- |
21+
| `uch` | `useContext` |
22+
23+
### Ref Hooks
24+
| Prefix | Snippet |
25+
| ------------- | ------------- |
26+
| `urh` | `useRef` |
27+
| `uihh` | `useImperativeHandle` |
28+
29+
### Effect Hooks
30+
| Prefix | Snippet |
31+
| ------------- | ------------- |
2132
| `ueh` | `useEffect` |
2233
| `uleh` | `useLayoutEffect` |
2334
| `uieh` | `useInsertionEffect` |
24-
| `uch` | `useContext` |
25-
| `ucbh` | `useCallback` |
35+
36+
### Performance Hooks
37+
| Prefix | Snippet |
38+
| ------------- | ------------- |
2639
| `umh` | `useMemo` |
27-
| `irh` | `import React` (and common hooks) |
28-
| `urh` | `useRef` |
29-
| `uihh` | `useImperativeHandle` |
30-
| `urdh` | `useReducer` |
40+
| `ucbh` | `useCallback` |
41+
| `uth` | `useTransition` |
42+
| `udvh` | `useDeferredValue` |
3143

44+
### Other Hooks
45+
| Prefix | Snippet |
46+
| ------------- | ------------- |
47+
| `udbvh` | `useDebugValue` |
48+
| `uidh` | `useId` |
49+
| `usesh` | `useSyncExternalStore` |
50+
| `uash` | `useActionState` |
3251

3352
## Add to your project
3453

3554
There are 2 ways you can add React Hooks Snippets to your project:
3655

37-
#### By command
56+
### By command
3857
Launch VS Code Quick Open (`Ctrl+P`), paste `ext install AlDuncanson.react-hooks-snippets`, and press enter.
3958

40-
#### By the Extension Marketplace
59+
### By the Extension Marketplace
4160
Launch VS Code Extension Marketplace (Ctrl+Shift+X), search for `React Hooks Snippets`, and look for my logo!
4261

4362

4463
## Contributing
4564

4665
There are two ways to contribute:
4766

48-
#### Code
67+
### Code
4968
Submit a pull request with your proposed fixes, changes, and/or improvements. All are welcome!
5069

51-
#### Coffee
70+
### Coffee
5271
<a href='https://www.buymeacoffee.com/alduncanson' target='_blank'><img src='https://cdn.buymeacoffee.com/buttons/default-orange.png' alt='Buy Me A Coffee' height='34' width='144'></a>
5372

5473
## License

‎snippets/snippets.json‎

Lines changed: 52 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,37 @@
66
],
77
"description": "React useState() hook"
88
},
9-
"useTransition": {
10-
"prefix": "uth",
11-
"body": [
12-
"const [isPending, startTransition] = useTransition();$0"
13-
],
14-
"description": "React useTransition() hook"
15-
},
16-
"useDeferredValue": {
17-
"prefix": "udvh",
18-
"body": [
19-
"const ${1:deferredValue} = useDeferredValue(${2:value});$0"
20-
],
21-
"description": "React useDeferredValue() hook"
22-
},
23-
"useDebugValue": {
24-
"prefix": "udbvh",
9+
"useReducer": {
10+
"prefix": "urdh",
2511
"body": [
26-
"useDebugValue(${1:value});$0"
12+
"const [${1:state},${2: dispatch}] = useReducer(${3:reducer}, ${4:initialArg}, ${5:init});"
2713
],
28-
"description": "React useDebugValue() hook"
14+
"description": "React useReducer() hook"
2915
},
30-
"useId": {
31-
"prefix": "uidh",
16+
"useContext": {
17+
"prefix": "uch",
3218
"body": [
33-
"const ${1:id} = useId();$0"
19+
"const $1 = useContext($2);$0"
3420
],
35-
"description": "React useId() hook"
21+
"description": "React useContext() hook"
3622
},
37-
"useSyncExternalStore": {
38-
"prefix": "usesh",
23+
"useRef": {
24+
"prefix": "urh",
3925
"body": [
40-
"const ${1:snapshot} = useSyncExternalStore(${2:subscribe}, ${3:getSnapshot}, ${4:getServerSnapshot});$0"
26+
"const $1 = useRef($2);$0"
4127
],
42-
"description": "React useSyncExternalStore() hook"
28+
"description": "React useRef() hook"
4329
},
44-
"useActionState": {
45-
"prefix": "uash",
30+
"useImperativeHandle": {
31+
"prefix": "uihh",
4632
"body": [
47-
"const [${1:state}, ${2:formAction}, ${3:isPending}] = useActionState(${4:fn}, ${5:initialState});$0"
33+
"useImperativeHandle(ref, () => {",
34+
"\treturn {",
35+
"\t\t$1",
36+
"\t}",
37+
"}, [$2]);$0"
4838
],
49-
"description": "React useActionState() hook"
39+
"description": "React useImperativeHandle() hook"
5040
},
5141
"useEffect": {
5242
"prefix": "ueh",
@@ -78,12 +68,12 @@
7868
],
7969
"description": "React useInsertionEffect() hook"
8070
},
81-
"useContext": {
82-
"prefix": "uch",
71+
"useMemo": {
72+
"prefix": "umh",
8373
"body": [
84-
"const $1 = useContext($2);$0"
74+
"const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}]);$0"
8575
],
86-
"description": "React useContext() hook"
76+
"description": "React useMemo() hook"
8777
},
8878
"useCallback": {
8979
"prefix": "ucbh",
@@ -97,42 +87,46 @@
9787
],
9888
"description": "React useCallback() hook"
9989
},
100-
"useMemo": {
101-
"prefix": "umh",
90+
"useTransition": {
91+
"prefix": "uth",
10292
"body": [
103-
"const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}]);$0"
93+
"const [isPending, startTransition] = useTransition();$0"
10494
],
105-
"description": "React useMemo() hook"
95+
"description": "React useTransition() hook"
10696
},
107-
"import react hooks": {
108-
"prefix": "irh",
97+
"useDeferredValue": {
98+
"prefix": "udvh",
10999
"body": [
110-
"import React, { useState, useContext, useEffect, useCallback, useMemo } from 'react';"
111-
]
100+
"const ${1:deferredValue} = useDeferredValue(${2:value});$0"
101+
],
102+
"description": "React useDeferredValue() hook"
112103
},
113-
"useRef": {
114-
"prefix": "urh",
104+
"useDebugValue": {
105+
"prefix": "udbvh",
115106
"body": [
116-
"const $1 = useRef($2);$0"
107+
"useDebugValue(${1:value});$0"
117108
],
118-
"description": "React useRef() hook"
109+
"description": "React useDebugValue() hook"
119110
},
120-
"useImperativeHandle": {
121-
"prefix": "uihh",
111+
"useId": {
112+
"prefix": "uidh",
122113
"body": [
123-
"useImperativeHandle(ref, () => {",
124-
"\treturn {",
125-
"\t\t$1",
126-
"\t}",
127-
"}, [$2]);$0"
114+
"const ${1:id} = useId();$0"
128115
],
129-
"description": "React useImperativeHandle() hook"
116+
"description": "React useId() hook"
130117
},
131-
"useReducer": {
132-
"prefix": "urdh",
118+
"useSyncExternalStore": {
119+
"prefix": "usesh",
133120
"body": [
134-
"const [${1:state},${2: dispatch}] = useReducer(${3:reducer}, ${4:initialArg}, ${5:init});"
121+
"const ${1:snapshot} = useSyncExternalStore(${2:subscribe}, ${3:getSnapshot}, ${4:getServerSnapshot});$0"
135122
],
136-
"description": "React useReducer() hook"
123+
"description": "React useSyncExternalStore() hook"
124+
},
125+
"useActionState": {
126+
"prefix": "uash",
127+
"body": [
128+
"const [${1:state}, ${2:formAction}, ${3:isPending}] = useActionState(${4:fn}, ${5:initialState});$0"
129+
],
130+
"description": "React useActionState() hook"
137131
}
138132
}

0 commit comments

Comments
 (0)