Reactnextjssnippets NPM

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→`	Explicitely import React
`imrc→`	Import React { Component }
`imst→`	(16.8+) useState import
`ust→`	Use (16.8+) useState hook
`imeff→`	(16.8+) useEffect import
`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

Next.js-specific Snippets

Trigger	Content
`imhd→`	import Head
`nhd→`	Use Head

Next.js getInitialProps()

Trigger	Content
`gip→`	getInitialProps() outside component
`ccgip→`	static getInitialProps() inside class component
`gipaq→`	Next.js getInitialProps() withApollo() expose query

Next.js getStaticProps()

Trigger	Content
`gsp→`	exports getStaticProps()

Next.js getServerSideProps()

Trigger	Content
`gssp→`	exports getServerSideProps()

Next.js getStaticPaths()

Trigger	Content
`gspaths→`	exports getStaticPaths()

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
`nqprtr→`	Destructure Next.js query param from Router from useRouter

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 | = props => {
  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>

gip - getInitialProps() outside component

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

ccgip - getInitialProps() outside component

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

gipaq - static getInitialProps() inside class component

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
  }
}

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
  };
}

gssp - exports getServerSideProps()

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

imlnk - import Next.js Link

import Link from "next/link";

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

VSCode Snippets React React Snippets Nextjs Nextjs Snippets

@everything-registry/sub-chunk-2627 @infinitebrahmanuniverse/nolb-reactn

1.4.2

4 years ago

1.3.0

4 years ago