├── .github └── FUNDING.yml ├── .gitignore ├── .vscode └── launch.json ├── .vscodeignore ├── CHANGELOG.md ├── LICENSE.txt ├── README.md ├── icon.png ├── package.json └── snippets └── snippets.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: alDuncanson 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.vsix -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "runtimeExecutable": "${execPath}", 13 | "args": [ 14 | "--extensionDevelopmentPath=${workspaceFolder}" 15 | ] 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | .gitignore 4 | vsc-extension-quickstart.md 5 | *.vsix -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to the "react-hooks-snippets" extension will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [1.2.0] 0 2020-10-21 9 | 10 | ### Removed 11 | - `prev` snippet 12 | 13 | ### Changed 14 | - updated `urdh` snippet 15 | 16 | ## [1.1.7] - 2020-06-22 17 | 18 | ### Changed 19 | - improved `useSelector` snippet 20 | - updated `README.md` 21 | - `.gitignore` 22 | 23 | ### Removed 24 | - old gifs 25 | 26 | 27 | ## [1.1.6] - 2019-07-31 28 | 29 | ### Added 30 | - typescript react support 31 | - removed useEffect() hook comments 32 | 33 | 34 | ## [1.1.5] - 2019-06-27 35 | 36 | ### Added 37 | - useRef hook snippet 38 | - useReducer hook snippet 39 | - prev state snippet 40 | - import react redux hooks 41 | - useSelector hook snippet 42 | - useDispatch hook snippet 43 | - dispatch snippet 44 | 45 | 46 | ## [1.1.1] - 2019-06-09 47 | 48 | ### Added 49 | - import react and hooks snippet 50 | 51 | 52 | ## [1.1.0] - 2019-04-19 53 | 54 | ### Added 55 | - useMemo hook snippet 56 | - useCallback hook snippet 57 | 58 | 59 | ## [1.0.0] - 2019-04-18 60 | 61 | - Initial release 62 | 63 | ### Added 64 | - useState hook snippet 65 | - useContext hook snippet 66 | - useEffect hook snippet -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright © 2019 Al 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | React Hooks Snippets icon 3 |

4 | 5 | # React Hooks Snippets 6 | 7 | ![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/AlDuncanson.react-hooks-snippets) 8 | ![Visual Studio Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/AlDuncanson.react-hooks-snippets) 9 | ![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/AlDuncanson.react-hooks-snippets) 10 | ![GitHub Repo stars](https://img.shields.io/github/stars/alDuncanson/react-hooks-snippets) 11 | ![GitHub forks](https://img.shields.io/github/forks/alDuncanson/react-hooks-snippets) 12 | 13 | A [Visual Studio Code](https://code.visualstudio.com/) extension that adds snippet functionality for [React Hooks](https://react.dev/reference/react/hooks). 14 | 15 | > Now updated to support all of the new hooks introduced in [React v19](https://react.dev/blog/2024/12/05/react-19)! 16 | 17 | ## Supported Hooks 18 | 19 | ### State Hooks 20 | | Prefix | Snippet | 21 | | ------------- | ------------- | 22 | | `ush` | `useState` | 23 | | `urdh` | `useReducer` | 24 | 25 | ### Context Hooks 26 | | Prefix | Snippet | 27 | | ------------- | ------------- | 28 | | `uch` | `useContext` | 29 | 30 | ### Ref Hooks 31 | | Prefix | Snippet | 32 | | ------------- | ------------- | 33 | | `urh` | `useRef` | 34 | | `uihh` | `useImperativeHandle` | 35 | 36 | ### Effect Hooks 37 | | Prefix | Snippet | 38 | | ------------- | ------------- | 39 | | `ueh` | `useEffect` | 40 | | `uleh` | `useLayoutEffect` | 41 | | `uieh` | `useInsertionEffect` | 42 | 43 | ### Performance Hooks 44 | | Prefix | Snippet | 45 | | ------------- | ------------- | 46 | | `umh` | `useMemo` | 47 | | `ucbh` | `useCallback` | 48 | | `uth` | `useTransition` | 49 | | `udvh` | `useDeferredValue` | 50 | 51 | ### React Dom Hooks 52 | | Prefix | Snippet | 53 | | ------------- | ------------- | 54 | | `ufsh` | `useFormStatus` | 55 | 56 | ### Other Hooks 57 | | Prefix | Snippet | 58 | | ------------- | ------------- | 59 | | `udbvh` | `useDebugValue` | 60 | | `uidh` | `useId` | 61 | | `usesh` | `useSyncExternalStore` | 62 | | `uash` | `useActionState` | 63 | | `uoh` | `useOptimistic` | 64 | 65 | ## Install 66 | 67 | Add the React Hooks Snippets extension to VS Code using one of the following methods: 68 | 69 | ### By command 70 | Launch VS Code Quick Open (`Ctrl+P`), paste `ext install AlDuncanson.react-hooks-snippets`, and press enter. 71 | 72 | ### By the Marketplace UI 73 | Launch VS Code Extension Marketplace UI (`Ctrl+Shift+X`), search for `React Hooks Snippets`, and look for my logo! 74 | 75 | ### By the Marketplace website 76 | Visit the extension's [Visual Studio Marketplace page](https://marketplace.visualstudio.com/items?itemName=AlDuncanson.react-hooks-snippets) and click `Install`. 77 | 78 | 79 | ## License 80 | Usage is provided under the [MIT License](https://opensource.org/licenses/MIT). See [LICENSE.txt](https://github.com/alDuncanson/react-hooks-snippets/blob/master/LICENSE.txt) for the full details. 81 | 82 | ## Support My Work 83 | 84 | If you like this extension, please consider supporting me by buying me a coffee! 85 | 86 | Buy Me A Coffee -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alDuncanson/react-hooks-snippets/5402c9cc771ad3225095d3e9c67aed492616c3d0/icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hooks-snippets", 3 | "displayName": "React Hooks Snippets", 4 | "description": "Code snippets for React Hooks", 5 | "version": "2.0.0", 6 | "icon": "icon.png", 7 | "publisher": "AlDuncanson", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/alDuncanson/react-hooks-snippets.git" 11 | }, 12 | "keywords": [ 13 | "react", 14 | "hooks", 15 | "javascript", 16 | "es6", 17 | "snippets", 18 | "snippet" 19 | ], 20 | "engines": { 21 | "vscode": "^1.33.0" 22 | }, 23 | "categories": [ 24 | "Snippets" 25 | ], 26 | "contributes": { 27 | "snippets": [ 28 | { 29 | "language": "javascript", 30 | "path": "./snippets/snippets.json" 31 | }, 32 | { 33 | "language": "javascriptreact", 34 | "path": "./snippets/snippets.json" 35 | }, 36 | { 37 | "language": "typescript", 38 | "path": "./snippets/snippets.json" 39 | }, 40 | { 41 | "language": "typescriptreact", 42 | "path": "./snippets/snippets.json" 43 | } 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /snippets/snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | "useState": { 3 | "prefix": "ush", 4 | "body": [ 5 | "const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2);$0" 6 | ], 7 | "description": "React useState() hook" 8 | }, 9 | "useReducer": { 10 | "prefix": "urdh", 11 | "body": [ 12 | "const [${1:state},${2: dispatch}] = useReducer(${3:reducer}, ${4:initialArg}, ${5:init});" 13 | ], 14 | "description": "React useReducer() hook" 15 | }, 16 | "useContext": { 17 | "prefix": "uch", 18 | "body": [ 19 | "const $1 = useContext($2);$0" 20 | ], 21 | "description": "React useContext() hook" 22 | }, 23 | "useRef": { 24 | "prefix": "urh", 25 | "body": [ 26 | "const $1 = useRef($2);$0" 27 | ], 28 | "description": "React useRef() hook" 29 | }, 30 | "useImperativeHandle": { 31 | "prefix": "uihh", 32 | "body": [ 33 | "useImperativeHandle(ref, () => {", 34 | "\treturn {", 35 | "\t\t$1", 36 | "\t}", 37 | "}, [$2]);$0" 38 | ], 39 | "description": "React useImperativeHandle() hook" 40 | }, 41 | "useEffect": { 42 | "prefix": "ueh", 43 | "body": [ 44 | "useEffect(() => {", 45 | "\t$1", 46 | "\n\treturn () => {", 47 | "\t\t$2", 48 | "\t}", 49 | "}, [${3}]);$0" 50 | ], 51 | "description": "React useEffect() hook" 52 | }, 53 | "useLayoutEffect": { 54 | "prefix": "uleh", 55 | "body": [ 56 | "useLayoutEffect(() => {", 57 | "\t$1", 58 | "}, [${2}]);$0" 59 | ], 60 | "description": "React useLayoutEffect() hook" 61 | }, 62 | "useInsertionEffect": { 63 | "prefix": "uieh", 64 | "body": [ 65 | "useInsertionEffect(() => {", 66 | "\t$1", 67 | "}, [${2}]);$0" 68 | ], 69 | "description": "React useInsertionEffect() hook" 70 | }, 71 | "useMemo": { 72 | "prefix": "umh", 73 | "body": [ 74 | "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}]);$0" 75 | ], 76 | "description": "React useMemo() hook" 77 | }, 78 | "useCallback": { 79 | "prefix": "ucbh", 80 | "body": [ 81 | "const ${1:memoizedCallback} = useCallback(", 82 | "\t() => {", 83 | "\t\t${2:doSomething}(${3:a}, ${4:b})", 84 | "\t},", 85 | "\t[${5:a}, ${6:b}],", 86 | ");$0" 87 | ], 88 | "description": "React useCallback() hook" 89 | }, 90 | "useTransition": { 91 | "prefix": "uth", 92 | "body": [ 93 | "const [isPending, startTransition] = useTransition();$0" 94 | ], 95 | "description": "React useTransition() hook" 96 | }, 97 | "useDeferredValue": { 98 | "prefix": "udvh", 99 | "body": [ 100 | "const ${1:deferredValue} = useDeferredValue(${2:value});$0" 101 | ], 102 | "description": "React useDeferredValue() hook" 103 | }, 104 | "useFormStatus": { 105 | "prefix": "ufsh", 106 | "body": [ 107 | "const { ${1:pending}, ${2:data}, ${3:method}, ${4:action} } = useFormStatus();$0" 108 | ], 109 | "description": "React Dom useFormStatus() hook" 110 | }, 111 | "useDebugValue": { 112 | "prefix": "udbvh", 113 | "body": [ 114 | "useDebugValue(${1:value});$0" 115 | ], 116 | "description": "React useDebugValue() hook" 117 | }, 118 | "useId": { 119 | "prefix": "uidh", 120 | "body": [ 121 | "const ${1:id} = useId();$0" 122 | ], 123 | "description": "React useId() hook" 124 | }, 125 | "useSyncExternalStore": { 126 | "prefix": "usesh", 127 | "body": [ 128 | "const ${1:snapshot} = useSyncExternalStore(${2:subscribe}, ${3:getSnapshot}, ${4:getServerSnapshot});$0" 129 | ], 130 | "description": "React useSyncExternalStore() hook" 131 | }, 132 | "useActionState": { 133 | "prefix": "uash", 134 | "body": [ 135 | "const [${1:state}, ${2:formAction}, ${3:isPending}] = useActionState(${4:fn}, ${5:initialState});$0" 136 | ], 137 | "description": "React useActionState() hook" 138 | }, 139 | "useOptimistic": { 140 | "prefix": "uoh", 141 | "body": [ 142 | "const [${1:optimisticState}, ${2:addOptimistic}] = useOptimistic(${3:state}, ${4:updateFn});$0" 143 | ], 144 | "description": "React useOptimistic() hook" 145 | } 146 | } 147 | --------------------------------------------------------------------------------