diff --git a/README.md b/README.md
index 5012249..e9a46e6 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,14 @@ Here is direct link to marketplace [ES7 React/Redux/React-Native/JS Snippets](ht
 Every space inside `{ }` and `( )` means that this is pushed into next line :)
 `$` represent each step after `tab`.
 
+Use `tab` to skip to the next step.
+In some cases, text will be capitalized. For example: `useState`
+<br>
+![Alt Text](./images/capitalize.gif)
+<br>
+
+After `count` is entered for `1ドル`, once `tab` is typed, `setCount` is capitalized.
+
 _TypeScript_ has own components and own snippets. Use search or just type `ts` before every component snippet.
 
 I.E. `tsrcc`
@@ -414,6 +422,16 @@ const 1ドル = () => {
 export default 1ドル
 ```
 
+### `rafcne`
+
+```javascript
+import React from 'react'
+
+export const 1ドル = () => {
+ return <div>0ドル</div>
+}
+```
+
 ### `rmc`
 
 ```javascript
@@ -439,6 +457,150 @@ 1ドル.propTypes = {}
 export default 1ドル
 ```
 
+### `fet`
+
+```javascript
+useEffect(() => {
+ const url = '0ドル'
+ fetch(url)
+ .then((res) => res.json())
+ .then((json) => {
+ console.log(json)
+ })
+}, [])
+```
+
+### `feta`
+
+```javascript
+useEffect(() => {
+ const url = '0ドル'
+ async function fetchApi() {
+ const res = await fetch(url)
+ const json = await res.json()
+ console.log(json)
+ }
+ fetchApi()
+}, [])
+```
+
+### `fets`
+
+```javascript
+const [{1ドル}, set{1ドル}] = useState(2ドル)
+
+useEffect(() => {
+ const url = '0ドル'
+ fetch(url)
+ .then((res) => res.json())
+ .then((json) => {
+ set{1ドル}(json)
+ })
+}, [])
+```
+
+### `fetas`
+
+```javascript
+const [{1ドル}, set{1ドル}] = useState(2ドル)
+
+useEffect(() => {
+ const url = '0ドル'
+ async function fetch{1ドル}() {
+ const res = await fetch(url)
+ const json = await res.json()
+ set{1ドル}(json)
+ }
+ fetch{1ドル}()
+}, [])
+
+```
+
+### `rfcfets`
+
+```javascript
+import React, { useState, useEffect } from 'react'
+
+const 1ドル = () => {
+ const [{2ドル}, set{2ドル}] = useState(3ドル)
+
+ useEffect(() => {
+ const url = '0ドル'
+ fetch(url)
+ .then((res) => res.json())
+ .then((json) => {
+ set{2ドル}(json)
+ })
+ }, [])
+
+ return <div>{2ドル}</div>
+}
+
+export default 1ドル
+```
+
+### `rfcfetas`
+
+```javascript
+import React, { useState, useEffect } from 'react'
+
+const 1ドル = () => {
+ const [{2ドル}, set{2ドル}] = useState(3ドル)
+
+ useEffect(() => {
+ const url = '0ドル'
+ async function fetch{2ドル}() {
+ const res = await fetch(url)
+ const json = await res.json()
+ set{2ドル}(json)
+ }
+ fetch{2ドル}()
+ }, [])
+
+ return <div>{2ドル}</div>
+}
+
+export default 1ドル
+
+```
+
+### `rcp`
+
+```javascript
+import React, { useState } from 'react'
+
+const {1ドル}Context = React.createContext()
+
+function {1ドル}Provider({ children }) {
+ const [{1ドル}, set{1ドル}] = useState(2ドル)
+ const value = { {1ドル}, set{1ドル} }
+ return <{1ドル}context.provider value={value}>{children}</{1ドル}context.provider>
+}
+export { {1ドル}Provider }
+```
+
+### `rcphook`
+
+```javascript
+import React, { useState } from 'react'
+
+const {1ドル}Context = React.createContext()
+
+function {1ドル}Provider({ children }) {
+ const [{1ドル}, set{1ドル}] = useState(2ドル)
+ const value = { {1ドル}, set{1ドル} }
+ return <{1ドル}context.provider value={value}>{children}</{1ドル}context.provider>
+}
+function use{1ドル}() {
+ const context = React.useContext({1ドル}Context)
+ if (context === undefined) {
+ throw new Error('use{1ドル} must be used within a {1ドル}Provider')
+ }
+ return context
+}
+export { {1ドル}Provider, use{1ドル} }
+```
+
 ### `rcredux`
 
 ```javascript
diff --git a/images/capitalize.gif b/images/capitalize.gif
new file mode 100644
index 0000000..b6b96e8
Binary files /dev/null and b/images/capitalize.gif differ
diff --git a/snippets/snippets.json b/snippets/snippets.json
index 9807929..1efb803 100644
--- a/snippets/snippets.json
+++ b/snippets/snippets.json
@@ -407,6 +407,18 @@
 ],
 "description": "Creates a React Arrow Function Component with ES7 module system"
 },
+ "reactArrowFunctionNamedExportComponent": {
+ "prefix": "rafcne",
+ "body": [
+ "import React from 'react'",
+ "",
+ "export const ${1:${TM_FILENAME_BASE}} = () => {",
+ " return <div>0ドル</div>",
+ "}",
+ ""
+ ],
+ "description": "Creates a React Arrow Function Component with ES7 module system with named export"
+ },
 "reactArrowFunctionComponent": {
 "prefix": "rafc",
 "body": [
@@ -594,6 +606,58 @@
 ],
 "description": "Creates a React component class with PropTypes and ES7 module system"
 },
+ "reactFunctionalComponentFetchWithState": {
+ "prefix": "rfcfets",
+ "body": [
+ "import React, { useState, useEffect } from 'react'",
+ "",
+ "const ${1:${TM_FILENAME_BASE}} = () => {",
+ " const [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState(3ドル)",
+ " ",
+ " useEffect(() => {",
+ " const url = '0ドル'",
+ " fetch(url)",
+ " .then((res) => res.json())",
+ " .then((json) => {",
+ " set${2/(.*)/${1:/capitalize}/}(json)",
+ " })",
+ " }, [])",
+ " ",
+ " return <div>{2ドル}</div>",
+ "}",
+ "",
+ "export default ${1:${TM_FILENAME_BASE}}",
+ ""
+ ],
+ "description": "Creates a React Function component with a data fetching effect with state"
+ },
+
+ "reactFunctionalComponentFetchAwaitWithState": {
+ "prefix": "rfcfetas",
+ "body": [
+ "import React, { useState, useEffect } from 'react'",
+ "",
+ "const ${1:${TM_FILENAME_BASE}} = () => {",
+ " const [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState(3ドル)",
+ "",
+ " useEffect(() => {",
+ " const url = '0ドル'",
+ " async function fetch${2/(.*)/${1:/capitalize}/}() {",
+ " const res = await fetch(url)",
+ " const json = await res.json()",
+ " set${2/(.*)/${1:/capitalize}/}(json)",
+ " }",
+ " fetch${2/(.*)/${1:/capitalize}/}()",
+ " }, [])",
+ " ",
+ " return <div>{2ドル}</div>",
+ "}",
+ "",
+ "export default ${1:${TM_FILENAME_BASE}}",
+ ""
+ ],
+ "description": "Creates a React Function component with a data fetching effect (await syntax) with state"
+ },
 "reactClassCompomentRedux": {
 "prefix": "rcredux",
 "body": [
@@ -816,6 +880,46 @@
 "body": ["const ${1:contextName} = React.createContext()", ""],
 "description": "Create React context"
 },
+ "contextProvider": {
+ "prefix": "rcp",
+ "body": [
+ "import React, { useState } from 'react'",
+ "",
+ "const ${1/(.*)/${1:/capitalize}/}Context = React.createContext()",
+ "",
+ "function ${1/(.*)/${1:/capitalize}/}Provider({ children }) {",
+ " const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(0ドル)",
+ " const value = { 1,ドル set${1/(.*)/${1:/capitalize}/} }",
+ " return <${1/(.*)/${1:/capitalize}/}context.provider value={value}>{children}</${1/(.*)/${1:/capitalize}/}context.provider>",
+ "}",
+ "export { ${1/(.*)/${1:/capitalize}/}Provider }"
+ ],
+ "description": "Create React Context Provider"
+ },
+ "contextProviderWithHook": {
+ "prefix": "rcphook",
+ "body": [
+ "import React, { useState } from 'react'",
+ "",
+ "const ${1/(.*)/${1:/capitalize}/}Context = React.createContext()",
+ "",
+ "function ${1/(.*)/${1:/capitalize}/}Provider({ children }) {",
+ " const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(0ドル)",
+ " const value = { 1,ドル set${1/(.*)/${1:/capitalize}/} }",
+ " return <${1/(.*)/${1:/capitalize}/}context.provider value={value}>{children}</${1/(.*)/${1:/capitalize}/}context.provider>",
+ "}",
+ "",
+ "function use${1/(.*)/${1:/capitalize}/}() {",
+ " const context = React.useContext(${1/(.*)/${1:/capitalize}/}Context)",
+ " if (context === undefined) {",
+ " throw new Error('use${1/(.*)/${1:/capitalize}/} must be used within a ${1/(.*)/${1:/capitalize}/}Provider')",
+ " }",
+ " return context",
+ "}",
+ "export { ${1/(.*)/${1:/capitalize}/}Provider, use${1/(.*)/${1:/capitalize}/} }"
+ ],
+ "description": "Create React Context Provider with custom useContext Hook"
+ },
 "createRef": {
 "prefix": "cref",
 "body": ["this.${1:refName}Ref = React.createRef()", ""],
@@ -1480,6 +1584,68 @@
 "}, [${3:input}])"
 ]
 },
+ "useEffectFetch": {
+ "prefix": "fet",
+ "body": [
+ "useEffect(() => {",
+ " const url = '0ドル'",
+ " fetch(url)",
+ " .then((res) => res.json())",
+ " .then((json) => {",
+ " console.log(json)",
+ " })",
+ "}, [])"
+ ],
+ "description": "Create a data fetching React effect"
+ },
+ "useEffectFetchAwait": {
+ "prefix": "feta",
+ "body": [
+ "useEffect(() => {",
+ " const url = '0ドル'",
+ " async function fetchApi() {",
+ " const res = await fetch(url)",
+ " const json = await res.json()",
+ " console.log(json)",
+ " }",
+ " fetchApi()",
+ "}, [])"
+ ],
+ "description": "Create a data fetching React effect (await syntax)"
+ },
+ "useEffectFetchWithState": {
+ "prefix": "fets",
+ "body": [
+ "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(2ドル)",
+ "",
+ "useEffect(() => {",
+ " const url = '0ドル'",
+ " fetch(url)",
+ " .then((res) => res.json())",
+ " .then((json) => {",
+ " set${1/(.*)/${1:/capitalize}/}(json)",
+ " })",
+ "}, [])"
+ ],
+ "description": "Create a data fetching React effect with state"
+ },
+ "useEffectFetchAwaitWithState": {
+ "prefix": "fetas",
+ "body": [
+ "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(2ドル)",
+ "",
+ "useEffect(() => {",
+ " const url = '0ドル'",
+ " async function fetch${1/(.*)/${1:/capitalize}/}() {",
+ " const res = await fetch(url)",
+ " const json = await res.json()",
+ " set${1/(.*)/${1:/capitalize}/}(json)",
+ " }",
+ " fetch${1/(.*)/${1:/capitalize}/}()",
+ "}, [])"
+ ],
+ "description": "Create a data fetching React effect (await syntax) with state"
+ },
 "useContext": {
 "prefix": "useContext",
 "body": ["const ${1:context} = useContext(${2:contextValue})"]
@@ -1859,7 +2025,7 @@
 "}",
 "",
 "export default ${1:${TM_FILENAME_BASE}}"
- ],
- "description": "Creates a React Custom Hook with ES7 module system"
- }
+ ],
+ "description": "Creates a React Custom Hook with ES7 module system"
+ }
 }
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/r5n-labs/vscode-react-javascript-snippets/pull/173.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/r5n-labs/vscode-react-javascript-snippets/pull/173.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>