Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ijsto/reactnextjssnippets
React Snippets tailored for NextJS developers
https://github.com/ijsto/reactnextjssnippets
Last synced: 4 days ago
JSON representation
React Snippets tailored for NextJS developers
- Host: GitHub
- URL: https://github.com/ijsto/reactnextjssnippets
- Owner: ijsto
- License: mit
- Created: 2019-10-25T00:17:39.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-01T14:36:07.000Z (almost 4 years ago)
- Last Synced: 2024-04-26T00:24:39.299Z (7 months ago)
- Size: 726 KB
- Stars: 9
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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)
```javascript
import React from "react";
```
### imrc - Import React, Component
```javascript
import { Component } from "react";
```
### imst - Import { useState }
```javascript
import { useState } from "react";
```
### ust - React useState
```javascript
const [value, setValue] = useState(${1:INITIAL_VALUE});
```
### imeff - Import { useEffect }
```javascript
import { useEffect } from "react";
```
### imctx - Import { useContext }
```javascript
import { useContext } from "react";
```
### uctx - React useContext
```javascript
const | = useContext(|);';
```
### immem - Import { useMemo }
```javascript
import { useMemo } from "react";
```
### imref - Import { useRef }
```javascript
import { useRef } from "react";
```
### imimphan - imImport { useImperativeHandle }
```javascript
import { useImperativeHandle } from "react";
```
### imlayeff - imImport { useLayoutEffect }
```javascript
import { useLayoutEffect } from "react";
```
### imdebval - imImport { useDebugValue }
```javascript
import { useDebugValue } from "react";
```
### imt - imImport PropTypes
```javascript
import PropTypes from "prop-types";
```
### impt - Import PropTypes
```javascript
import PropTypes from "prop-types";
```
### impc - Import PureComponent
```javascript
import React, { PureComponent } from "react";
```
### cc - Class Component
```javascript
class | extends Component {
state = { | }
render() {
return ( | );
}
}
export default |;
```
### ccc - Class Component With Constructor
```javascript
class | extends React.Component {
constructor(props) {
super(props);
this.state = { | }
}
render() {
return ( | );
}
}
export default |;
```
### fc - Functional Component without a state
```javascript
const | = (|) => {
return ( | );
}
```
### fce - Functional Component as named export
```javascript
export const | = (|) => {
return ( | );
}
```
### fcde Functional Component with default export
```javascript
const | = (|) => {
return ( | );
}
export default |;
```
### fcst - Functional Component with a useState hook
```javascript
import { useState } from 'react';
const | = props => {
const [value, setValue] = useState(${1:INITIAL_VALUE});
return ( | );
};
export default |;
```
### imhd - import Next.js Head
```javascript
import Head from "next/head";
```
### nhd - Use Next.js Head
```javascript
|
```
### imgsp - import Next.js GetStaticProps type
```typescript
import { GetStaticProps } from "next";
```
### iminfgsp - import Next.js InferGetStaticPropsType
```typescript
import { InferGetStaticPropsType } from "next";
```
### ninfgsp - import Next.js InferGetStaticPropsType
```typescript
function |({ posts }: InferGetStaticPropsType) {
return |
}
```
### gip - getInitialProps() outside component
```javascript
|.getInitialProps = async ({ req }) => {
return |
}
```
### ccgip - getInitialProps() outside component
```javascript
static async getInitialProps() { return { | }; }
```
### ccgipaq - static getInitialProps() withApollo() expose query
```javascript
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()
```javascript
export async function getStaticProps(context) {
return {
props: { | }, // will be passed to the page component as props
}
}
```
```typescript
export const getStaticProps: GetStaticProps = async (context) => {
return {
props: { | } // will be passed to the page component as props
};
}
```
### gspaths - exports getStaticPaths()
```javascript
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
};
}
```
```typescript
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [
{ params: { | } }
],
fallback: |
};
}
```
### gssp - exports getServerSideProps()
```javascript
export async function getServerSideProps(context) {
return {
props: { | }, // will be passed to the page component as props
};
}
```
```typescript
export const getServerSideProps: GetServerSideProps = async (context) => {
return {
props: { | },
};
}
```
### imgvsp - import Next.js GetServerSideProps type
```typescript
import { GetServerSideProps } from "next";
```
### iminfgvsp - import Next.js InferGetServerSidePropsType type
```typescript
import { InferGetServerSidePropsType } from "next";
```
### ninfgvsp - use Next.js InferGetServerSidePropsType type
```typescript
function |({ data }: InferGetServerSidePropsType) {
return |
}
```
### imlnk - import Next.js Link
```javascript
import Link from "next/link";
```
### nimg - Use Sized Next.js image
```javascript
```
### nuimg - Use unsized Next.js image
```javascript
```
### nlnk - Use Next.js Link
```javascript
```
### nlnkpath - Use Next.js Link With Pathname
```javascript
```
### nlnkdyn - Use Next.js LinkTagWithDynmicRoute
```javascript
```
### imrtr - importNextRouter
```javascript
import Router from "next/router";
```
### nrtr - Next.js Router from useRouter
```javascript
const router = useRouter();
```
### nqprtr - Next.js query param from useRouter
```javascript
const { $1 } = router.query;
```
### imrtrwr - importNextRouterWithRouter
```javascript
import Router, { withRouter } from "next/router";
```
### imusrtr - importNextUseRouter
```javascript
import { useRouter } from "next/router";
```
[iJS.to](https://ijs.to)