docs: add full examples

Author: afiiif

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to the "vscode-js-ts-react-nextjs-snippets" extension will be documented in this file.
 
+## 1.13.0 <small>- 2022/09/14</small>
+
+- Added React.lazy snippet (`_rLazy`)
+- Added [React Router](https://reactrouter.com/) snippets
+- Improved documentation! [Full Examples](./snippets.md) are now available 🥳
+
 ## 1.12.0 <small>- 2022/09/07</small>
 
 - Improved JSON stringify/parse wrapper-snippet

README.md

@@ -23,6 +23,7 @@ For TypeScript snippets:
 - Check React snippets using `$r`
 - Check [Next.js](https://nextjs.org/) snippets using `$n`
 - Check [React Native](https://reactnative.dev/) snippets using `$rn`
+- Check [React Router](https://reactrouter.com/) snippets using `$rou`
 - Check [React Query](https://react-query.tanstack.com/) snippets using `$rq`
 - Check [SWR](https://swr.vercel.app/) snippets using `$swr`
 - Check [Redux](https://react-redux.js.org/) snippets using `$rx`
@@ -32,6 +33,8 @@ For TypeScript snippets:
 - Check [Emotion CSS](https://emotion.sh/docs/introduction) snippets using `$emo`
 - Check wrapper-snippets using `$_`
 
+### 👉 [See All Available Snippets Here!](./snippets.md) 👈
+
 ## Examples
 
 ![Next.js snippet](./images/snippet-next-js.gif)
@@ -56,7 +59,7 @@ Select text and copy it 📋 write snippet and boom! 🪄💥
 
 ## Why There Are No Snippet for Import? 🤔
 
-Because you might not need that. VSCode has built-in feature for auto-import your modules.
+Because you might not need that. VSCode has built-in feature for auto-import your modules. Use `Ctrl`+`Space` on your variable and a popup will appear.
 
 <img src="./images/auto-import.gif" alt="VSCode built-in auto import" width="100%" />
 

images/demo/01.1-console.gif

@@ -0,0 +1,166 @@
+First of all, you need to understand that we don't provide a snippet for importing your package like any other VSCode snippets extention.
+
+`imr` → `import React from 'react'`
+
+👆 We don't do it here.
+
+We encourage you to use the built-in auto import from VSCode.  
+Use `Ctrl`+`Space` on your variable and a popup will appear.
+
+<img src="./images/auto-import.gif" alt="VSCode built-in auto import" width="100%" />
+
+If auto import doesn't appear, open command palette (`Ctrl`+`Shift`+`P`) and select restart TS server.
+
+![Restart TS server](./images/vscode-restart-ts-server.png)
+
+---
+
+Okay, here we go...
+
+# All Available Snippets
+
+## Vanilla JavaScript
+
+### Console
+
+![Console](./images/demo/01.1-console.gif)
+
+### setTimeout & setInterval
+
+![setTimeout & setInterval](./images/demo/01.2-set-timeout-set-interval.gif)
+
+### Arrow Function
+
+![Arrow Function](./images/demo/01.3-arrow-function.gif)
+
+### JSON.stringify & JSON.parse
+
+![JSON.stringify & JSON.parse](./images/demo/01.4-json.gif)
+
+### typeof
+
+![typeof](./images/demo/01.5-typeof.gif)
+
+## React
+
+### Component (Regular Function)
+
+![TODO](./images/demo/02.1-react-function-component.gif)
+
+### Component (Arrow Function)
+
+![TODO](./images/demo/02.2-react-arrow-function-component.gif)
+
+### React Hooks
+
+![TODO](./images/demo/02.3-react-hooks.gif)
+
+### JSX Wrapper
+
+![TODO](./images/demo/02.4-jsx-wrapper.gif)
+
+### React Lazy
+
+![TODO](./images/demo/02.5-react-lazy.gif)
+
+### React dangerouslySetInnerHTML
+
+![TODO](./images/demo/02.6-dangerous-html.gif)
+
+## Next.js
+
+### Next.js getServerSideProps, getStaticProps, getStaticPaths
+
+![Next.js snippet](./images/snippet-next-js.gif)
+
+### Next.js Custom Document
+
+![TODO](./images/demo/03.2-next-custom-document.gif)
+
+### Next.js Router
+
+![TODO](./images/demo/03.3-next-use-router.gif)
+
+### Next.js Dynamic Import
+
+![TODO](./images/demo/03.4-next-dynamic-import.gif)
+
+## React Native
+
+### React Native Component
+
+![TODO](./images/demo/04.1-react-native-component.gif)
+
+## React Router
+
+### Create Router
+
+![TODO](./images/demo/05.1-react-router.gif)
+
+### React Router Hooks
+
+![TODO](./images/demo/05.2-react-router-hooks.gif)
+
+## React Query
+
+### React Query
+
+![TODO](./images/demo/06.1-react-query.gif)
+
+## SWR
+
+### SWR Hook
+
+![TODO](./images/demo/07.1-swr.gif)
+
+## Redux
+
+### Redux Store
+
+![TODO](./images/demo/08.1-redux-store.gif)
+
+### Redux Slice
+
+![TODO](./images/demo/08.2-redux-slice.gif)
+
+### Redux Hooks
+
+![TODO](./images/demo/08.3-redux-hooks.gif)
+
+## Testing
+
+### Test Block
+
+![TODO](./images/demo/09.1-test-block.gif)
+
+### Before & After
+
+![TODO](./images/demo/09.2-test-before-after.gif)
+
+## React Hook Form
+
+### React Hook Form
+
+![TODO](./images/demo/10.1-react-hook-form.gif)
+
+## Zustand
+
+### Zustand Config
+
+![TODO](./images/demo/11.1-zustand-create-store.gif)
+
+### Zustand Hooks
+
+![TODO](./images/demo/11.1-zustand-hooks.gif)
+
+## Emotion CSS
+
+### Emotion CSS in React Component
+
+![TODO](./images/demo/12.1-emotion-css.gif)
+
+## TypeScript
+
+### Generate Types/Interface from Clipboard
+
+![Generate-from-clipboard snippet](./images/snippet-from-clipboard.gif)