Usage Guide
Installation
- Install the VSCode extension
- Reload VSCode
- Snippets are ready 🎉
Usage
React
JavaScript
rimr (Import React)
import React from "react";
rimrd (Import ReactDOM)
import ReactDOM from "react-dom";
rimrs (Import React and useState)
import React, { useState } from "react";
rimrse (Import React, useState and useEffect)
import React, { useState, useEffect } from "react";
rfc (React functional component)
const Component = () => {
return <div></div>;
};
export default Component;
rue (useEffect hook)
useEffect(() => {}, []);
rus (useState hook)
const [state, setState] = useState(initialValue);
ruc (useContext hook)
const value = useContext(myContext);
rur (useRef hook)
const refContainer = useRef(initialValue);
TypeScript
rfcet (React functional component)
import React from "react";
interface Props {}
function Component({}: Props) {
return <div></div>;
}
export default Component;
ruet (useEffect hook)
useEffect(() => {}, []);
rust (useState hook)
const [state, setState] = useState(initialValue);
ruct (useContext hook)
const value = useContext(myContext);
rurt (useRef hook)
const refContainer = useRef(initialValue);
NextJS
JavaScript
ngss (Next.js get server side props)
export const getServerSideProps = async (context) => {
return {
props: {},
};
};
ngsp (Next.js get static props)
export const getStaticProps = async (context) => {
return {
props: {},
};
};
ncapp (Next.js custom app)
const MyApp = ({ Component, pageProps }) => {
return <Component {...pageProps} />;
};
export default MyApp;
ncdoc (Next.js custom document)
import Document, { Html, Main, NextScript } from "next/document";
const Document: Document = () => {
return (
<Html lang="en">
<body>
<Main />
<NextScript />
</body>
</Html>
);
};
export default Document;
ngspa (Next.js get static path)
export const getStaticPaths = async () => {
return {
paths:[${1}],
fallback:false
};
};
TypeScript
ngsst (Next.js get server side props)
export const getServerSideProps: GetServerSideProps = async (context) => {
return { props: {} };
};
ngspt (Next.js get static props)
export const getStaticProps: getStaticProps = async (context) => {
return { props: {} };
};
npt (Next.js page)
import type { NextPage } from "next";
const Page: NextPage = () => {
return <></>;
};
export default Page;
ngipt (Next.js get initial props)
Page.getInitialProps = async (context) => {
return { props: {} };
};
nct (Next.js component)
import type { NextComponentType, NextPageContext } from "next";
interface Props {}
const Component: NextComponentType<NextPageContext, {}, Props> = (
props: Props
) => {
return <div></div>;
};
export default Component;
ngspat (Next.js Get Static Path Typescript)
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths:[${1}],
fallback:false
};
}
ncappt (Next.js custom app)
const MyApp = ({ Component, pageProps }) => {
return <Component {...pageProps} />;
};
export default MyApp;
ncdoct(Next.js custom document)
import Document, { Html, Main, NextScript } from "next/document";
const Document: Document = () => {
return (
<Html lang="en">
<body>
<Main />
<NextScript />
</body>
</Html>
);
};
export default Document;
| |
