Next.js and React Snippets README
NextJS and React Snippets with TypeScript support as well!
Installation
- Install the VSCode extension
- Reload VSCode
- Snippets are ready
π
Usage
React
JavaScript
-
rimr(Import React)import React from "react";
-
rimrd(Import ReactDOM)import ReactDOM from "react-dom";
-
rimrs(Import React and useState)import React, { useState } from "react";
-
rimrse(Import React, useState and useEffect)import React, { useState, useEffect } from "react";
-
rfce(React functional component)const Component = () => { return <div></div>; }; export default Component;
-
rue(React useEffect)useEffect(() => {}, []);
-
rus(React useState)const [state, setState] = useState(initialValue);
-
ruc(React useContext)const value = useContext(myContext);
-
rur(React useRef)const refContainer = useRef(initialValue);
TypeScript
-
; } export default Component;">rfcet(React functional component Typescript)import React from "react"; interface Props {} function Component({}: Props) { return <div></div>; } export default Component;
NextJS
JavaScript
-
nssr(Next.js Get Server Side Props)export const getServerSideProps = async context => { return { props: {}, }; };
-
nssg(Next.js Get Static Props)export const getStaticProps = async context => { return { props: {}, }; };
-
ncapp(Next Custom App)const MyApp = ({ Component, pageProps }) => { return <Component {...pageProps} />; }; export default MyApp;
-
ncdoc(Next Custom Document){ return (); }; export default Document;"> import Document, { Html, Main, NextScript } from "next/_document"; const Document: Document = () => { return ( <Html lang="en"> <body> <Main /> <NextScript /> </body> </Html> ); }; export default Document;
-
ngsp(Next.js Get Static Path Javascript)export const getStaticPaths = async () => { return { paths:[${1}], fallback:false }; };
TypeScript
-
nssrt(Next.js Get Server Side Props Typescript)export const getServerSideProps: GetServerSideProps = async context => { return { props: {} }; };
-
nssgt(Next.js Get Static Props Typescript)export const getStaticProps: getStaticProps = async context => { return { props: {} }; };
-
ngip(Get Initial Props in Next.js)Page.getInitialProps = async context => { return { props: {} }; };
-
npt(Next.js Page Typescript){ return <>; }; export default Page;">import type { NextPage } from "next"; const Page: NextPage = () => { return <></>; }; export default Page;
-
nct(Next.js Component Typescript)= ( props: Props ) => { return ; }; export default Component;">import type { NextComponentType, NextPageContext } from "next"; interface Props {} const Component: NextComponentType<NextPageContext, {}, Props> = ( props: Props ) => { return <div></div>; }; export default Component;
-
ncappt(Next Custom App Typescript)const MyApp = ({ Component, pageProps }) => { return <Component {...pageProps} />; }; export default MyApp;
-
ncdoct(Next Custom Document Typescript){ return (); }; export default Document;"> import Document, { Html, Main, NextScript } from "next/_document"; const Document: Document = () => { return ( <Html lang="en"> <body> <Main /> <NextScript /> </body> </Html> ); }; export default Document;
-
ngspt(Next.js Get Static Path Typescript)export const getStaticPaths: GetStaticPaths = async () => { return { paths:[${1}], fallback:false }; }
![[FEATURE] create issue and pull request template](https://avatars.githubusercontent.com/u/90365542?v=4)
![[FEATURE] Add Code of Conduct](https://avatars.githubusercontent.com/u/76690419?v=4)
![[ImgBot] Optimize images](https://avatars.githubusercontent.com/in/4706?v=4)
![[FEATURE] Publish plugin to Open VSX Registry](https://avatars.githubusercontent.com/u/87228994?v=4)
23 Sep 16, 2022
963 Dec 31, 2022
1.2k Jan 3, 2023
1 Nov 12, 2021
247 Jan 2, 2023
11 Jan 28, 2022
3 Jul 27, 2021
5 Nov 29, 2022
897 Dec 11, 2022
2 Jan 17, 2022
125 Jul 15, 2022
298 Dec 25, 2022
116 Dec 5, 2022
95 Dec 28, 2022
49 Dec 3, 2022
9 Oct 31, 2022
261 Dec 30, 2022
3 Dec 23, 2022
1.3k Dec 22, 2022