From 9867c253c6d3ff9bb5d021b612893482c8ff92b4 Mon Sep 17 00:00:00 2001 From: Kira Date: Fri, 11 Feb 2022 18:28:03 +0530 Subject: [PATCH 1/3] docs: add more snippets to the readme --- README.md | 113 +++++++++++++++++++++------------ package.json | 2 +- snippets/next-javascript.json | 4 +- snippets/react-javascript.json | 15 ----- snippets/react-typescript.json | 11 ---- 5 files changed, 74 insertions(+), 71 deletions(-) diff --git a/README.md b/README.md index 6a0a357..27c888a 100644 --- a/README.md +++ b/README.md @@ -14,37 +14,86 @@ NextJS and React Snippets with TypeScript support as well!🚀 ### JavaScript -1. `rafce` (React Functional Component) +1. `rim` (Import React) - ```jsx - const Component = () => { - return
; - }; - export default Component; - ``` + ```jsx + import React from 'react'; + ``` + +2. `rird` (Import ReactDOM) + + ```jsx + import ReactDOM from 'react-dom'; + ``` + +3. `rimrs` (Import React and useState) + + ```jsx + import React, { useState } from 'react'; + ``` + +4. `rimrse` (Import React, useState and useEffect) + + ```jsx + import React, { useState, useEffect} from 'react'; + ``` + +5. `rfce` (React functional component) + + ```jsx + const Component = () => { + return
; + } + export default Component; + ``` + +6. `rue` (React useEffect) + + ```jsx + useEffect(() => { + + }, []); + ``` + +7. `rus` (React useState) + + ```jsx + const [state, setState] = useState(initialValue); + ``` + +8. `ruc` (React useContext) + + ```jsx + const value = useContext(myContext); + ``` + +9. `rur` (React useRef) + + ```jsx + const refContainer = useRef(initialValue); + ``` ### TypeScript -2. `rafect` (React Functional Component with Types) +1. `rfcet` (React functional component Typescript) - ```tsx - import { FC } from "react"; - interface Props {} - const Component: FC = () => { - return
; - }; - export default Component; - ``` + ```tsx + import React from "react"; + + interface Props {} + + function Component({}: Props) { + return
; + } + + export default Component; + ``` ## NextJS ### JavaScript -<<<<<<< HEAD -1. `nssr` (Get Server Side Props Next.js) -======= 1. `nssr` (Next.js Get Server Side Props Typescript) ->>>>>>> 5f7082e97c62b0d190ff1375a6a840db993a53c2 ```jsx export const getServerSideProps = async (context) => { @@ -54,11 +103,7 @@ NextJS and React Snippets with TypeScript support as well!🚀 }; ``` -<<<<<<< HEAD -2. `nssg` (Get Static Props Next.js) -======= 2. `nssg` (Next.js Get Static Props Typescript) ->>>>>>> 5f7082e97c62b0d190ff1375a6a840db993a53c2 ```jsx export const getStaticProps = async (context) => { @@ -70,11 +115,7 @@ NextJS and React Snippets with TypeScript support as well!🚀 ### TypeScript -<<<<<<< HEAD -1. `nssrt` (Get Server Side Props Next.js) -======= 1. `nssrt` (Next.js Get Server Side Props Typescript) ->>>>>>> 5f7082e97c62b0d190ff1375a6a840db993a53c2 ```tsx export const getServerSideProps: GetServerSideProps = async (context) => { @@ -82,11 +123,7 @@ NextJS and React Snippets with TypeScript support as well!🚀 }; ``` -<<<<<<< HEAD -2. `nssgt` (Get Static Props Next.js) -======= 2. `nssgt` (Next.js Get Static Props Typescript) ->>>>>>> 5f7082e97c62b0d190ff1375a6a840db993a53c2 ```tsx export const getStaticProps: getStaticProps = async (context) => { @@ -102,11 +139,7 @@ NextJS and React Snippets with TypeScript support as well!🚀 }; ``` -<<<<<<< HEAD -3) `npaget` (NextPage component with NextPage type) -======= -3) `npt` (Next.js Page Typescript) ->>>>>>> 5f7082e97c62b0d190ff1375a6a840db993a53c2 +4. `npt` (Next.js Page Typescript) ```tsx import type { NextPage } from "next"; @@ -116,11 +149,7 @@ NextJS and React Snippets with TypeScript support as well!🚀 export default Page; ``` -<<<<<<< HEAD -4) `nct` (Next JS Component with NextComponentType and Props) -======= -4) `nct` (Next.js Component Typescript) ->>>>>>> 5f7082e97c62b0d190ff1375a6a840db993a53c2 +5. `nct` (Next.js Component Typescript) ```tsx import type { NextComponentType, NextPageContext } from "next"; diff --git a/package.json b/package.json index a451cb3..b950d8e 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "nextreactsnippets", + "name": "react-nextjs-snippets", "displayName": "Next.js and React Snippets", "description": "This is an extension for Next.js and React Snippets with ts support as well!", "version": "0.4.1", diff --git a/snippets/next-javascript.json b/snippets/next-javascript.json index f2cc06d..3cce614 100644 --- a/snippets/next-javascript.json +++ b/snippets/next-javascript.json @@ -1,5 +1,5 @@ { - "ssr": { + "nssr": { "prefix": "nssr", "body": [ "export const getServerSideProps = async context => {", @@ -11,7 +11,7 @@ ], "description": "Next.js Get Server Side Props Typescript" }, - "ssg": { + "nssg": { "prefix": "nssg", "body": [ "export const getStaticProps = async context => {", diff --git a/snippets/react-javascript.json b/snippets/react-javascript.json index 81954f5..41eca46 100644 --- a/snippets/react-javascript.json +++ b/snippets/react-javascript.json @@ -19,21 +19,6 @@ "body": ["import React, { useState, useEffect} from 'react';"], "description": "Import React, useState and useEffect" }, - "rfce": { - "prefix": "rfce", - "body": [ - "import React from 'react'", - "", - "function ${1:${TM_FILENAME_BASE}}() {", - " return (", - "
", - " )", - "}", - "", - "export default ${1:${TM_FILENAME_BASE}}" - ], - "description": "React Functional Component" - }, "React functional component": { "prefix": "rfc", "body": [ diff --git a/snippets/react-typescript.json b/snippets/react-typescript.json index e244939..9f7125d 100644 --- a/snippets/react-typescript.json +++ b/snippets/react-typescript.json @@ -14,16 +14,5 @@ "" ], "description": "React functional component Typescript" - }, - "React functional component": { - "prefix": "rfc", - "body": [ - "const ${1:${TM_FILENAME_BASE}} = () => {", - " return
;", - "};", - "export default ${1:${TM_FILENAME_BASE}};", - "" - ], - "description": "React functional component" } } From 5b51bf93be7b9a4ff5992563f966e4878e2917a1 Mon Sep 17 00:00:00 2001 From: Kira Date: Fri, 11 Feb 2022 18:31:26 +0530 Subject: [PATCH 2/3] docs: fix typo --- README.md | 82 +++++++++++++++++----------------- snippets/react-javascript.json | 2 +- 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 27c888a..84f4872 100644 --- a/README.md +++ b/README.md @@ -14,80 +14,80 @@ NextJS and React Snippets with TypeScript support as well!🚀 ### JavaScript -1. `rim` (Import React) +1. `rir` (Import React) - ```jsx - import React from 'react'; - ``` + ```jsx + import React from 'react'; + ``` 2. `rird` (Import ReactDOM) - ```jsx - import ReactDOM from 'react-dom'; - ``` + ```jsx + import ReactDOM from 'react-dom'; + ``` 3. `rimrs` (Import React and useState) - ```jsx - import React, { useState } from 'react'; - ``` + ```jsx + import React, { useState } from 'react'; + ``` 4. `rimrse` (Import React, useState and useEffect) - ```jsx - import React, { useState, useEffect} from 'react'; - ``` + ```jsx + import React, { useState, useEffect} from 'react'; + ``` 5. `rfce` (React functional component) - ```jsx - const Component = () => { - return
; - } - export default Component; - ``` + ```jsx + const Component = () => { + return
; + } + export default Component; + ``` 6. `rue` (React useEffect) - ```jsx - useEffect(() => { - - }, []); - ``` + ```jsx + useEffect(() => { + + }, []); + ``` 7. `rus` (React useState) - ```jsx - const [state, setState] = useState(initialValue); - ``` + ```jsx + const [state, setState] = useState(initialValue); + ``` 8. `ruc` (React useContext) - ```jsx - const value = useContext(myContext); - ``` + ```jsx + const value = useContext(myContext); + ``` 9. `rur` (React useRef) - ```jsx - const refContainer = useRef(initialValue); - ``` + ```jsx + const refContainer = useRef(initialValue); + ``` ### TypeScript 1. `rfcet` (React functional component Typescript) - ```tsx - import React from "react"; + ```tsx + import React from "react"; - interface Props {} + interface Props {} - function Component({}: Props) { - return
; - } + function Component({}: Props) { + return
; + } - export default Component; - ``` + export default Component; + ``` ## NextJS diff --git a/snippets/react-javascript.json b/snippets/react-javascript.json index 41eca46..1ebff54 100644 --- a/snippets/react-javascript.json +++ b/snippets/react-javascript.json @@ -1,6 +1,6 @@ { "Import React": { - "prefix": "rim", + "prefix": "rir", "body": ["import React from 'react';"], "description": "Import React" }, From 58194df68a504f33f97dff26ed611af2bb7c4c07 Mon Sep 17 00:00:00 2001 From: Kira Date: Fri, 11 Feb 2022 18:33:16 +0530 Subject: [PATCH 3/3] docs: fix typo agai --- README.md | 4 ++-- snippets/react-javascript.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 84f4872..a2e79c6 100644 --- a/README.md +++ b/README.md @@ -14,13 +14,13 @@ NextJS and React Snippets with TypeScript support as well!🚀 ### JavaScript -1. `rir` (Import React) +1. `rimr` (Import React) ```jsx import React from 'react'; ``` -2. `rird` (Import ReactDOM) +2. `rimrd` (Import ReactDOM) ```jsx import ReactDOM from 'react-dom'; diff --git a/snippets/react-javascript.json b/snippets/react-javascript.json index 1ebff54..2e3bff5 100644 --- a/snippets/react-javascript.json +++ b/snippets/react-javascript.json @@ -1,11 +1,11 @@ { "Import React": { - "prefix": "rir", + "prefix": "rimr", "body": ["import React from 'react';"], "description": "Import React" }, "Import ReactDOM": { - "prefix": "rird", + "prefix": "rimrd", "body": ["import ReactDOM from 'react-dom';"], "description": "Import ReactDOM" },