React and Next.js Snippets with TypeScript support as well!🚀
- Install the VSCode extension
- Reload VSCode
- Snippets are ready 🎉
-
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";
-
rfc(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);
-
rfcet(React functional component Typescript)import React from "react"; interface Props {} function Component({}: Props) { return <div></div>; } export default Component;
-
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)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 }; };
-
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)import type { NextPage } from "next"; const Page: NextPage = () => { return <></>; }; export default Page;
-
nct(Next.js Component Typescript)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)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 }; }