v1.0.0

Author: bryceosterhaus

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"bracketSpacing": false,
+	"singleQuote": true,
+	"tabWidth": 4,
+	"useTabs": true
+}

.vscodeignore

@@ -0,0 +1,2 @@
+.prettierrc
+playground.js

CHANGELOG.md

@@ -0,0 +1,19 @@
+# Change Log
+
+## v1.0.0
+
+Initial Set of Hooks
+
+|   Trigger | Content                    |
+| --------: | -------------------------- |
+|   `uref→` | useRef()                   |
+|    `ust→` | useState()                 |
+|   `ueff→` | useEffect()                |
+|   `ulay→` | useLayoutEffect()          |
+|   `ucon→` | useContext()               |
+|  `ucall→` | useCallback()              |
+|   `umem→` | useMemo()                  |
+|   `uimp→` | useImperativeHandle()      |
+|   `ured→` | useReducer()               |
+| `udebug→` | useDebugValue()            |
+|    `use→` | Generic for selecting hook |

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 bryceosterhaus
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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

@@ -0,0 +1,25 @@
+# Simple React Hooks Snippets
+
+Simple set of snippets for React Hooks.
+
+[React hooks](https://reactjs.org/docs/hooks-reference.html) snippets extension for [Visual Studio Code](https://code.visualstudio.com/).
+
+## Snippets
+
+Below is a list of all available snippets and the triggers of each one. The **→** means the `TAB` key.
+
+### Globals
+
+|   Trigger | Content                    |
+| --------: | -------------------------- |
+|   `uref→` | useRef()                   |
+|    `ust→` | useState()                 |
+|   `ueff→` | useEffect()                |
+|   `ulay→` | useLayoutEffect()          |
+|   `ucon→` | useContext()               |
+|  `ucall→` | useCallback()              |
+|   `umem→` | useMemo()                  |
+|   `uimp→` | useImperativeHandle()      |
+|   `ured→` | useReducer()               |
+| `udebug→` | useDebugValue()            |
+|    `use→` | Generic for selecting hook |

package.json

@@ -0,0 +1,40 @@
+{
+	"name": "simple-react-hooks-snippets",
+	"version": "1.0.0",
+	"description": "Set of helpful snippets for VSCode for working with React hooks",
+	"author": "Bryce Osterhaus <[email protected]>",
+	"license": "MIT",
+	"publisher": "bryceo",
+	"displayName": "Simple React Hooks Snippets",
+	"icon": "react-logo.png",
+	"engines": {
+		"vscode": "0.10.x"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/bryceosterhaus/react-hooks-snippets"
+	},
+	"categories": [
+		"Snippets"
+	],
+	"contributes": {
+		"snippets": [
+			{
+				"language": "javascriptreact",
+				"path": "./snippets/snippets.json"
+			},
+			{
+				"language": "javascript",
+				"path": "./snippets/snippets.json"
+			},
+			{
+				"language": "typescript",
+				"path": "./snippets/snippets.json"
+			},
+			{
+				"language": "typescriptreact",
+				"path": "./snippets/snippets.json"
+			}
+		]
+	}
+}

playground.js

@@ -0,0 +1 @@
+// This file is used for testing snippets

react-logo.png

@@ -0,0 +1,56 @@
+{
+	"useRef": {
+		"body": "const ${1}Ref = React.useRef(${2:null});",
+		"prefix": "uref"
+	},
+	"useState": {
+		"body": "const [${1}, set${1/(.*)/${1:/capitalize}/}] = React.useState(${2});",
+		"prefix": "ust"
+	},
+	"useEffect": {
+		"body": ["React.useEffect(() => {", "\t${1}", "}, [${2}]);"],
+		"prefix": "ueff"
+	},
+	"useLayoutEffect": {
+		"body": ["React.useLayoutEffect(() => {", "\t${1}", "}, [${2}]);"],
+		"prefix": "ulay"
+	},
+	"useContext": {
+		"body": "const ${1} = React.useContext(${2});",
+		"prefix": "ucon"
+	},
+	"useCallback": {
+		"body": [
+			"const ${1} = React.useCallback((${2:args}) => {",
+			"\t${3}",
+			"}, [${4}]);"
+		],
+		"prefix": "ucall"
+	},
+	"useMemo": {
+		"body": ["const ${1} = React.useMemo(() => {", "\t${2}", "}, [${3}]);"],
+		"prefix": "umem"
+	},
+	"useImperativeHandle": {
+		"body": [
+			"React.useImperativeHandle(${1:ref}, () => ({",
+			"\t${2:focus}: () => {",
+			"\t\t${3}",
+			"\t},",
+			"}));"
+		],
+		"prefix": "uimp"
+	},
+	"useReducer": {
+		"body": "const [${1:state}, ${2:dispatch}] = React.useReducer(${3:reducer}, ${4:initialState});",
+		"prefix": "ured"
+	},
+	"useDebugValue": {
+		"body": "React.useDebugValue(${1});",
+		"prefix": "udebug"
+	},
+	"use*": {
+		"body": "React.use${1|State,Effect,Ref,Memo,Context,Callback|}(${2});",
+		"prefix": "use"
+	}
+}