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;