Update hooks snippets.

woodreamz · Dec 17, 2019 · a502535 · a502535
1 parent c6fd40d
commit a502535
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -99,17 +99,30 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :)
 
 - All hooks from [official docs](https://reactjs.org/docs/hooks-reference.html) are added with hook name prefix.
 
+|                 Prefix | Method                                                              |
+| ---------------------: | ------------------------------------------------------------------- |
+|            `useState→` | `const [state, setState] = useState(initialState);`                 |
+|           `useEffect→` | ``                                                                  |
+|          `useContext→` | `const context = useContext(contextValue)`                          |
+|          `useReducer→` | `const [state, dispatch] = useReducer(reducer, initialState, init)` |
+|         `useCallback→` | ``                                                                  |
+|             `useMemo→` | ``                                                                  |
+|              `useRef→` | ``                                                                  |
+| `useImperativeHandle→` | ``                                                                  |
+|       `useDebugValue→` | `useDebugValue(value)`                                              |
+|     `useLayoutEffect→` | ``                                                                  |
+
 ## Redux
 
-|          Prefix | Method                       |
-| --------------: | ---------------------------- |
-|     `rxaction→` | `redux action template`      |
-|      `rxconst→` | `export const $1 = '$1'`     |
-|    `rxreducer→` | `redux reducer template`     |
-|     `rxselect→` | `redux selector template`    |
-| `rxuseSelector` | `redux useSelector template` |
-| `rxuseDispatch` | `redux useDispatch template` |
-|    `rxuseStore` | `redux useStore template`    |
+|           Prefix | Method                       |
+| ---------------: | ---------------------------- |
+|      `rxaction→` | `redux action template`      |
+|       `rxconst→` | `export const $1 = '$1'`     |
+|     `rxreducer→` | `redux reducer template`     |
+|      `rxselect→` | `redux selector template`    |
+| `rxuseSelector→` | `redux useSelector template` |
+| `rxuseDispatch→` | `redux useDispatch template` |
+|    `rxuseStore→` | `redux useStore template`    |
 
 ## PropTypes
 

diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "es7-react-js-snippets",
   "displayName": "ES7 React/Redux snippets",
-  "description": "Simple extensions for React, Redux and in JS with ES7 syntax",
-  "version": "2.3.4",
+  "description": "Simple extensions for React, Redux in JS with ES7 syntax",
+  "version": "2.3.5",
   "publisher": "woodreamz",
   "icon": "images/logo.png",
   "keywords": [

diff --git a/snippets/snippets.json b/snippets/snippets.json
@@ -41,7 +41,12 @@
   },
   "exportNamedFunction": {
     "prefix": "enf",
-    "body": ["export const ${1:functionName} = (${2:params}) => {", "\t$0", "}", ""],
+    "body": [
+      "export const ${1:functionName} = (${2:params}) => {",
+      "\t$0",
+      "}",
+      ""
+    ],
     "description": "Export named function in ES7 syntax"
   },
   "exportDefaultFunction": {
@@ -208,31 +213,46 @@
   },
   "import React, { Component } & PropTypes": {
     "prefix": "imrcp",
-    "body": ["import React, { Component } from 'react'", "import PropTypes from 'prop-types'", ""]
+    "body": [
+      "import React, { Component } from 'react'",
+      "import PropTypes from 'prop-types'",
+      ""
+    ]
   },
   "import React, { PureComponent }": {
     "prefix": "imrpc",
     "body": ["import React, { PureComponent } from 'react'", ""]
   },
   "import React, { PureComponent } & PropTypes": {
     "prefix": "imrpcp",
-    "body": ["import React, { PureComponent } from 'react'", "import PropTypes from 'prop-types'", ""]
+    "body": [
+      "import React, { PureComponent } from 'react'",
+      "import PropTypes from 'prop-types'",
+      ""
+    ]
   },
   "import React, { memo }": {
     "prefix": "imrm",
     "body": ["import React, { memo } from 'react'", ""]
   },
   "import React, { memo } & PropTypes": {
     "prefix": "imrmp",
-    "body": ["import React, { memo } from 'react'", "import PropTypes from 'prop-types'", ""]
+    "body": [
+      "import React, { memo } from 'react'",
+      "import PropTypes from 'prop-types'",
+      ""
+    ]
   },
   "import PropTypes": {
     "prefix": "impt",
     "body": ["import PropTypes from 'prop-types'", ""]
   },
   "import React Router": {
     "prefix": "imrr",
-    "body": ["import { BrowserRouter as Router, Route, Link } from 'react-router-dom'", ""]
+    "body": [
+      "import { BrowserRouter as Router, Route, Link } from 'react-router-dom'",
+      ""
+    ]
   },
   "import redux statement": {
     "prefix": "redux",
@@ -245,15 +265,15 @@
       "import styled from 'styled-components';",
       "import PropTypes from 'prop-types';",
       "",
-      "// #region styled-components",
+      "// #region constants",
       "",
       "// #endregion",
       "",
-      "// #region functions",
+      "// #region styled-components",
       "",
       "// #endregion",
       "",
-      "// #region constants",
+      "// #region functions",
       "",
       "// #endregion",
       "",
@@ -293,15 +313,15 @@
       "import styled from 'styled-components';",
       "import PropTypes from 'prop-types';",
       "",
-      "// #region styled-components",
+      "// #region constants",
       "",
       "// #endregion",
       "",
-      "// #region functions",
+      "// #region styled-components",
       "",
       "// #endregion",
       "",
-      "// #region constants",
+      "// #region functions",
       "",
       "// #endregion",
       "",
@@ -332,15 +352,15 @@
       "import styled from 'styled-components';",
       "import PropTypes from 'prop-types';",
       "",
-      "// #region styled-components",
+      "// #region constants",
       "",
       "// #endregion",
       "",
-      "// #region functions",
+      "// #region styled-components",
       "",
       "// #endregion",
       "",
-      "// #region constants",
+      "// #region functions",
       "",
       "// #endregion",
       "",
@@ -375,11 +395,29 @@
   },
   "mappingToProps": {
     "prefix": "reduxmap",
-    "body": ["const mapStateToProps = (state) => ({", "\t${1}", "})", "", "const mapDispatchToProps = {", "\t", "}", ""]
+    "body": [
+      "const mapStateToProps = (state) => ({",
+      "\t${1}",
+      "})",
+      "",
+      "const mapDispatchToProps = {",
+      "\t",
+      "}",
+      ""
+    ]
   },
   "classConstructor": {
     "prefix": "rconst",
-    "body": ["constructor(props) {", "\tsuper(props)", "", "\tthis.state = {", "\t\t $0", "\t}", "}", ""],
+    "body": [
+      "constructor(props) {",
+      "\tsuper(props)",
+      "",
+      "\tthis.state = {",
+      "\t\t $0",
+      "\t}",
+      "}",
+      ""
+    ],
     "description": "Adds a default constructor for it('', () => {})the class that contains props as arguments"
   },
   "emptyState": {
@@ -429,12 +467,25 @@
   },
   "getSnapshotBeforeUpdate": {
     "prefix": "gsbu",
-    "body": ["getSnapshotBeforeUpdate = (prevProps, prevState) => {", "\t$0", "}", ""],
+    "body": [
+      "getSnapshotBeforeUpdate = (prevProps, prevState) => {",
+      "\t$0",
+      "}",
+      ""
+    ],
     "description": "Called right before mutations are made (e.g. before the DOM is updated)"
   },
   "componentRender": {
     "prefix": "ren",
-    "body": ["render() {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "}"],
+    "body": [
+      "render() {",
+      "\treturn (",
+      "\t\t<div>",
+      "\t\t\t$0",
+      "\t\t</div>",
+      "\t)",
+      "}"
+    ],
     "description": "Basic render."
   },
   "createContext": {
@@ -478,7 +529,13 @@
   },
   "reduxAction": {
     "prefix": "rxaction",
-    "body": ["export const ${1:actionName} = (payload) => ({", "\ttype: ${3:type},", "\tpayload", "})", ""]
+    "body": [
+      "export const ${1:actionName} = (payload) => ({",
+      "\ttype: ${3:type},",
+      "\tpayload",
+      "})",
+      ""
+    ]
   },
   "reduxConst": {
     "prefix": "rxconst",
@@ -798,23 +855,40 @@
   },
   "useState": {
     "prefix": "useState",
-    "body": ["const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialState})"]
+    "body": [
+      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialState})"
+    ]
   },
   "useEffect": {
     "prefix": "useEffect",
-    "body": ["useEffect(() => {", "\treturn () => {", "\t\t${1:effect}", "\t};", "}, [${2:input}])"]
+    "body": [
+      "useEffect(() => {",
+      "\treturn () => {",
+      "\t\t${1:effect}",
+      "\t};",
+      "}, [${2:input}])"
+    ]
   },
   "useContext": {
     "prefix": "useContext",
     "body": ["const ${1:context} = useContext(${2:contextValue})"]
   },
   "useReducer": {
     "prefix": "useReducer",
-    "body": ["const [state, dispatch] = useReducer(${1:reducer}, ${2:initialState}, ${3:init})"]
+    "body": [
+      "const [state, dispatch] = useReducer(${1:reducer}, ${2:initialState}, ${3:init})"
+    ]
   },
   "useCallback": {
     "prefix": "useCallback",
-    "body": ["useCallback(", "\t() => {", "\t\t${1:callback}", "\t},", "\t[${2:input}],", ")"]
+    "body": [
+      "useCallback(",
+      "\t() => {",
+      "\t\t${1:callback}",
+      "\t},",
+      "\t[${2:input}],",
+      ")"
+    ]
   },
   "useMemo": {
     "prefix": "useMemo",
@@ -826,14 +900,29 @@
   },
   "useImperativeHandle": {
     "prefix": "useImperativeHandle",
-    "body": ["useImperativeHandle(", "\t${1:ref},", "\t() => {", "\t\t${2:handler}", "\t},", "\t[${3:input}],", ")"]
+    "body": [
+      "useImperativeHandle(",
+      "\t${1:ref},",
+      "\t() => {",
+      "\t\t${2:handler}",
+      "\t},",
+      "\t[${3:input}],",
+      ")"
+    ]
   },
   "useDebugValue": {
     "prefix": "useDebugValue",
     "body": ["useDebugValue(${1:value})"]
   },
   "useLayoutEffect": {
     "prefix": "useLayoutEffect",
-    "body": ["useLayoutEffect(() => {", "\treturn () => {", "\t\t${1:effect}", "\t},", "\t[${2:input}]", "})"]
+    "body": [
+      "useLayoutEffect(() => {",
+      "\treturn () => {",
+      "\t\t${1:effect}",
+      "\t},",
+      "\t[${2:input}]",
+      "})"
+    ]
   }
 }