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

1. rimr (Import React)

   import React from 'react';

2. rimrd (Import ReactDOM)

   import ReactDOM from 'react-dom';

3. rimrs (Import React and useState)

   import React, { useState } from 'react';

4. rimrse (Import React, useState and useEffect)

   import React, { useState, useEffect} from 'react';

5. rfce (React functional component)

   const Component = () => {
     return <div></div>;
   }
   export default Component;

6. rue (React useEffect)

   useEffect(() => {
     
     }, []);

7. rus (React useState)

   const [state, setState] = useState(initialValue);

8. ruc (React useContext)

   const value = useContext(myContext);

9. rur (React useRef)

   const refContainer = useRef(initialValue);

TypeScript

1. rfcet (React functional component Typescript)

   import React from "react";
   
   interface Props {}
   
   function Component({}: Props) {
     return <div></div>;
   }
   
   export default Component;

NextJS

JavaScript

1. nssr (Next.js Get Server Side Props Typescript)

   export const getServerSideProps = async (context) => {
     return {
       props: {},
     };
   };

2. nssg (Next.js Get Static Props Typescript)

   export const getStaticProps = async (context) => {
     return {
       props: {},
     };
   };

TypeScript

1. nssrt (Next.js Get Server Side Props Typescript)

   export const getServerSideProps: GetServerSideProps = async (context) => {
     return { props: {} };
   };

2. nssgt (Next.js Get Static Props Typescript)

   export const getStaticProps: getStaticProps = async (context) => {
     return { props: {} };
   };

3. ngip (Get Initial Props in Next.js)

   Page.getInitialProps = async (context) => {
     return { props: {} };
   };

4. npt (Next.js Page Typescript)

   import type { NextPage } from "next";
   const Page: NextPage = () => {
     return <></>;
   };
   export default Page;

5. 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;