diff --git a/README.md b/README.md index 6a0a357..a2e79c6 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. `rimr` (Import React) + + ```jsx + import React from 'react'; + ``` + +2. `rimrd` (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 ce7570c..9f90d5a 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..2e3bff5 100644 --- a/snippets/react-javascript.json +++ b/snippets/react-javascript.json @@ -1,11 +1,11 @@ { "Import React": { - "prefix": "rim", + "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" }, @@ -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" } }