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"
}
}