Skip to content

Commit 4015dff

Browse files
avneesh0612avneesh0612
authored
Merge pull request #32 from kr-anurag/main
docs: change docs
2 parents 73dce95 + d7df950 commit 4015dff

File tree

2 files changed

+2
-234
lines changed

2 files changed

+2
-234
lines changed

‎README.md‎

Lines changed: 1 addition & 226 deletions
Original file line numberDiff line numberDiff line change
@@ -15,229 +15,4 @@ React and Next.js Snippets with TypeScript support as well!🚀
1515

1616
# Usage
1717

18-
## React
19-
20-
### JavaScript
21-
22-
1. `rimr` (Import React)
23-
24-
```jsx
25-
import React from "react";
26-
```
27-
28-
2. `rimrd` (Import ReactDOM)
29-
30-
```jsx
31-
import ReactDOM from "react-dom";
32-
```
33-
34-
3. `rimrs` (Import React and useState)
35-
36-
```jsx
37-
import React, { useState } from "react";
38-
```
39-
40-
4. `rimrse` (Import React, useState and useEffect)
41-
42-
```jsx
43-
import React, { useState, useEffect } from "react";
44-
```
45-
46-
5. `rfc` (React functional component)
47-
48-
```jsx
49-
const Component = () => {
50-
return <div></div>;
51-
};
52-
export default Component;
53-
```
54-
55-
6. `rue` (React useEffect)
56-
57-
```jsx
58-
useEffect(() => {}, []);
59-
```
60-
61-
7. `rus` (React useState)
62-
63-
```jsx
64-
const [state, setState] = useState(initialValue);
65-
```
66-
67-
8. `ruc` (React useContext)
68-
69-
```jsx
70-
const value = useContext(myContext);
71-
```
72-
73-
9. `rur` (React useRef)
74-
75-
```jsx
76-
const refContainer = useRef(initialValue);
77-
```
78-
79-
### TypeScript
80-
81-
1. `rfcet` (React functional component Typescript)
82-
83-
```tsx
84-
import React from "react";
85-
86-
interface Props {}
87-
88-
function Component({}: Props) {
89-
return <div></div>;
90-
}
91-
92-
export default Component;
93-
```
94-
95-
## NextJS
96-
97-
### JavaScript
98-
99-
1. `nssr` (Next.js Get Server Side Props)
100-
101-
```jsx
102-
export const getServerSideProps = async (context) => {
103-
return {
104-
props: {},
105-
};
106-
};
107-
```
108-
109-
2. `nssg` (Next.js Get Static Props)
110-
111-
```jsx
112-
export const getStaticProps = async (context) => {
113-
return {
114-
props: {},
115-
};
116-
};
117-
```
118-
119-
3. `ncapp` (Next Custom App)
120-
121-
```jsx
122-
const MyApp = ({ Component, pageProps }) => {
123-
return <Component {...pageProps} />;
124-
};
125-
126-
export default MyApp;
127-
```
128-
129-
4. `ncdoc` (Next Custom Document)
130-
131-
```jsx
132-
import Document, { Html, Main, NextScript } from "next/_document";
133-
const Document: Document = () => {
134-
return (
135-
<Html lang="en">
136-
<body>
137-
<Main />
138-
<NextScript />
139-
</body>
140-
</Html>
141-
);
142-
};
143-
144-
export default Document;
145-
```
146-
147-
5. `ngsp` (Next.js Get Static Path Javascript)
148-
149-
```jsx
150-
export const getStaticPaths = async () => {
151-
return {
152-
paths:[${1}],
153-
fallback:false
154-
};
155-
};
156-
```
157-
158-
### TypeScript
159-
160-
1. `nssrt` (Next.js Get Server Side Props Typescript)
161-
162-
```tsx
163-
export const getServerSideProps: GetServerSideProps = async (context) => {
164-
return { props: {} };
165-
};
166-
```
167-
168-
2. `nssgt` (Next.js Get Static Props Typescript)
169-
170-
```tsx
171-
export const getStaticProps: getStaticProps = async (context) => {
172-
return { props: {} };
173-
};
174-
```
175-
176-
3. `ngip` (Get Initial Props in Next.js)
177-
178-
```tsx
179-
Page.getInitialProps = async (context) => {
180-
return { props: {} };
181-
};
182-
```
183-
184-
4. `npt` (Next.js Page Typescript)
185-
186-
```tsx
187-
import type { NextPage } from "next";
188-
const Page: NextPage = () => {
189-
return <></>;
190-
};
191-
export default Page;
192-
```
193-
194-
5. `nct` (Next.js Component Typescript)
195-
196-
```tsx
197-
import type { NextComponentType, NextPageContext } from "next";
198-
interface Props {}
199-
const Component: NextComponentType<NextPageContext, {}, Props> = (
200-
props: Props
201-
) => {
202-
return <div></div>;
203-
};
204-
export default Component;
205-
```
206-
207-
6. `ncappt` (Next Custom App Typescript)
208-
209-
```tsx
210-
const MyApp = ({ Component, pageProps }) => {
211-
return <Component {...pageProps} />;
212-
};
213-
export default MyApp;
214-
```
215-
216-
7. `ncdoct`(Next Custom Document Typescript)
217-
218-
```tsx
219-
import Document, { Html, Main, NextScript } from "next/_document";
220-
const Document: Document = () => {
221-
return (
222-
<Html lang="en">
223-
<body>
224-
<Main />
225-
<NextScript />
226-
</body>
227-
</Html>
228-
);
229-
};
230-
231-
export default Document;
232-
```
233-
234-
8. `ngspt` (Next.js Get Static Path Typescript)
235-
236-
```tsx
237-
export const getStaticPaths: GetStaticPaths = async () => {
238-
return {
239-
paths:[${1}],
240-
fallback:false
241-
};
242-
}
243-
```
18+
All the snippets and using guide is given in the [USING Guide](./packages/vscode/README.md)

‎packages/vscode/README.md‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
# React and Next.js Snippets README
2-
3-
React and Next.js Snippets with TypeScript support as well!🚀
4-
5-
![Logo Showcase](https://user-images.githubusercontent.com/76690419/153743536-15a5218f-12fc-4f20-9557-9f79863ef5b8.png)
6-
7-
<a href="https://www.producthunt.com/posts/react-and-next-js-snippets?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-react-and-next-js-snippets" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.png?post_id=331596&theme=dark" alt="React and Next.js Snippets - React and Next.js snippets with TypeScript | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
8-
<a href="https://www.producthunt.com/posts/react-and-next-js-snippets?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-react-and-next-js-snippets" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.png?post_id=331596&theme=dark&period=daily" alt="React and Next.js Snippets - React and Next.js snippets with TypeScript | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
1+
# Usage Guide
92

103
# Installation
114

0 commit comments

Comments
 (0)