Orainsink / react-hooks-snippets

Visual Studio Code extension, code snippets for React Hooks

NR React Hooks Snippets

Code less, think more.

Folked from react-hooks-snippets

Supported Snippets

Prefix	Snippet
clg	console.log( $1 )
clgn	console.log("$1", $1)
cls	className={styles.$1}
sty	style={{ $1 }}
esp	e.stopPropagation(); e.preventDefault();
glb	& :global($1){$2};
v--	var(--$1);
elli	css text-overflow: ellipsis
ush	const [$1,set$1] = useState($2);
ueh	useEffect template
uch	useCallback template
umh	useMemo template
urh	const $1 = useRef(${2:null})
uss	const $1 = useSelector((state: iRootState) => state.$2);
usd	const dispatch = useDispatch<Dispatch>();
usc	const { $2 } = $1.useContainer();
usm	const is$1 = useMedia('(max-width: $1px)');
uswr	useSWR template
imr	import * as React from 'react';
imrh	import React, { xx } from 'react';
imd	import { useSelector, useDispatch } from 'react-redux';
ima	import { xx } from 'antd';
imc	import classnames from 'classnames';
ims	import { ReactComponent as $1Svg } from '$1.svg';
imswr	import useSWR from 'swr';
iml	import loadable from '@loadable/component';
lmm	const $1 = loadable(() => import('$1'));$0
imc	import classnames from 'classnames';
imt	a template of normal react component
imdt	a template of react component with Redux
imut	a template of unstated-next

imt

import React from 'react';
import styles from './index.module.less';
interface Props {

}
const FC = (props: Props) => {
  return (

  );
};
export default React.memo(FC);

imdt

import React from 'react';
import styles from './index.module.less';
import { useDispatch, useSelector } from 'react-redux';
import { Dispatch, iRootState } from '../store';
interface Props {

}
const FC = (props: Props) => {
  const dispatch = useDispatch<Dispatch>();
  const  = useSelector((state: iRootState) => state.);
  return (

  );
};
export default React.memo(FC);

imut

import { useState } from "react";
import { createContainer } from "unstated-next";

function useCounter() {
  const [state, setState] = useState < any > null;
  return { state, setState };
}

export default createContainer(useCounter);

Add to your project

There are 2 ways you can add React Hooks Snippets to your project:

By command

Launch VS Code Quick Open (Ctrl+P), paste ext install Orainsink.nr-react-hooks-snippets, and press enter.

By the Extension Marketplace

Launch VS Code Extension Marketplace (Ctrl+Shift+X), search for NR React Hooks Snippets, and look for my logo!

Contributing

Submit a pull request with your proposed fixes, changes, and/or improvements and I'll take a look!

License

Usage is provided under the MIT License. See LICENSE.txt for the full details.