Skip to content

ijsto/reactnextjssnippets

Repository files navigation

React Snippets for Next.js by iJS

Thanks for giving this a go. Hope this helps and makes your coding more efficient and fun.

Hello.

Animations coming soon.

Pull requests for animations or any other contributions are most welcome!

Installation

  • Launch the Command Pallete (Ctrl + Shift + P or ⌘Cmd + Shift + P) and type "Install Extensions" (or navigate from the sidebar to Extensions tab).
  • In search box type in "iJS" and choose the React Next.js Snippets by iJS
  • Install the extension (you may need to relaunch VS Code)
  • Get a coffee, a cookie and celebrate by writing some Next.js code more effeciently than ever!

Supported languages (file extensions)

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)

Below is a list of all available snippets and the triggers of each one. The means the TAB key.

Must have React Snippets

Trigger Content
imr→ Explicitly import React
imrc→ Import React { Component }
imst→ (16.8+) useState import
ust→ Use (16.8+) useState hook
imeff→ (16.8+) useEffect import
uueff→ use useEffect
imctx→ (16.8+) useContext import
uctx→ Use React useContext hook
immem→ (16.8+) useMemo import
imref→ (16.8+) useRef import
imimphan→ (16.8+) useImperativeHandle import
imlayeff→ (16.8+) useLayoutEffect import
imdebval→ (16.8+) useDebugValue import
imt→ Import PropTypes
cc Class Component
ccc→ Class Component With Constructor
fc→ Functional Component
fce→ Functional Component as named export
fcde→ Functional Component with default export
fcst→ Functional Component with useState Hook

Next.js getInitialProps()

Trigger Content
gip→ getInitialProps() outside component
ccgip→ static getInitialProps() inside class component
ccgipaq→ static getInitialProps() withApollo() expose query

Next.js getStaticProps()

Trigger Content
gsp→ exports getStaticProps()
imgsp import GetStaticProps type
iminfgsp import InferGetStaticPropsType
ninfgsp use InferGetStaticPropsType

Next.js getServerSideProps()

Trigger Content
gssp→ exports getServerSideProps()
imgvsp→ imports GetServerSideProps type
iminfgvsp→ imports InferGetServerSidePropsType
ninfgvsp→ use InferGetServerSidePropsType

Next.js getStaticPaths()

Trigger Content
gspaths→ exports getStaticPaths()
imgspaths→ import GetStaticPaths

Next.js Head />

Trigger Content
imhd→ import Head
nhd→ Use Head

Next.js Image />

Trigger Content
imimg→ import Image
nimg→ Use sized image
nuimg→ Use unsized image

Next.js Link />

Trigger Content
imlnk→ import Link
nlnk→ Use Link
nlnkpath→ Next Link tag with pathname;
nlnkdyn→ Next Link tag with dynamic route;

Next.js Router />

Trigger Content
imrtr→ import Router
nrtr→ Declare Next.js Router from useRouter
nqprtr→ Destructure Next.js query param from Router from useRouter
imrtrwr→ import Router and withRouter HOC
imusrtr→ import Router hook
  • More snippets to come, stay tuned!

Expanded Snippets

imr - Import React - if you must (Next.js imports React implicitly)

import React from "react";

imrc - Import React, Component

import { Component } from "react";

imst - Import { useState }

import { useState } from "react";

ust - React useState

  const [value, setValue] = useState(${1:INITIAL_VALUE});

imeff - Import { useEffect }

import { useEffect } from "react";

imctx - Import { useContext }

import { useContext } from "react";

uctx - React useContext

const | = useContext(|);';

immem - Import { useMemo }

import { useMemo } from "react";

imref - Import { useRef }

import { useRef } from "react";

imimphan - imImport { useImperativeHandle }

import { useImperativeHandle } from "react";

imlayeff - imImport { useLayoutEffect }

import { useLayoutEffect } from "react";

imdebval - imImport { useDebugValue }

import { useDebugValue } from "react";

imt - imImport PropTypes

import PropTypes from "prop-types";

impt - Import PropTypes

import PropTypes from "prop-types";

impc - Import PureComponent

import React, { PureComponent } from "react";

cc - Class Component

class | extends Component {
  state = { | }

  render() {
    return ( | );
  }
}

export default |;

ccc - Class Component With Constructor

class | extends React.Component {
    constructor(props) {
      super(props);
      this.state = { | }
    }
    render() {
        return ( | );
    }
}

export default |;

fc - Functional Component without a state

const | = (|) => {
  return ( | );
}

fce - Functional Component as named export

export const | = (|) => {
  return ( | );
}

fcde Functional Component with default export

const | = (|) => {
  return ( | );
}

export default |;

fcst - Functional Component with a useState hook

import { useState } from 'react';

const | = props => {
  const [value, setValue] = useState(${1:INITIAL_VALUE});

  return ( | );
};

export default |;

imhd - import Next.js Head

import Head from "next/head";

nhd - Use Next.js Head

<Head> | </Head>

imgsp - import Next.js GetStaticProps type

import { GetStaticProps } from "next";

iminfgsp - import Next.js InferGetStaticPropsType

import { InferGetStaticPropsType } from "next";

ninfgsp - import Next.js InferGetStaticPropsType

function |({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
      return |
      }

gip - getInitialProps() outside component

|.getInitialProps = async ({ req }) => {
  return |
}

ccgip - getInitialProps() outside component

static async getInitialProps() { return { | }; }

ccgipaq - static getInitialProps() withApollo() expose query

static async getInitialProps({ Component, ctx }) {
  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  pageProps.query = ctx.query;
  pageProps.asPath = ctx.asPath;

  return { pageProps };
}

gsp - exports getStaticProps()

export async function getStaticProps(context) {
  return {
    props: { | }, // will be passed to the page component as props
  }
}
export const getStaticProps: GetStaticProps = async (context) => {
  return {
    props: { | } // will be passed to the page component as props
  };
}

gspaths - exports getStaticPaths()

export async function getStaticPaths() {
  return {
    paths: [
      { params: { | } } // See https://nextjs.org/docs/basic-features/data-fetching#the-paths-key-required
    ],
    fallback: | // See https://nextjs.org/docs/basic-features/data-fetching#fallback-true
  };
}
export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [
      { params: { | } }
    ],
    fallback: |
  };
}

gssp - exports getServerSideProps()

export async function getServerSideProps(context) {
  return {
    props: { | }, // will be passed to the page component as props
  };
}
export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: { | },
  };
}

imgvsp - import Next.js GetServerSideProps type

import { GetServerSideProps } from "next";

iminfgvsp - import Next.js InferGetServerSidePropsType type

import { InferGetServerSidePropsType } from "next";

ninfgvsp - use Next.js InferGetServerSidePropsType type

function |({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) {
      return |
      }

imlnk - import Next.js Link

import Link from "next/link";

nimg - Use Sized Next.js image

<Image alt="|" src="|" width="|" height="|" />

nuimg - Use unsized Next.js image

<Image alt="|" src="|" width="|" unsized />

nlnk - Use Next.js Link

<Link href="|">
  <a>|</a>
</Link>

nlnkpath - Use Next.js Link With Pathname

<Link href={{ pathname: |, query: { queryName: | } }}>
  <a>|</a>
</Link>

nlnkdyn - Use Next.js LinkTagWithDynmicRoute

<Link href="/|" as={`/|`}>
  <a>|</a>
</Link>

imrtr - importNextRouter

import Router from "next/router";

nrtr - Next.js Router from useRouter

const router = useRouter();

nqprtr - Next.js query param from useRouter

const { $1 } = router.query;

imrtrwr - importNextRouterWithRouter

import Router, { withRouter } from "next/router";

imusrtr - importNextUseRouter

import { useRouter } from "next/router";

iJS.to