Snippets

Snippets info

Every space inside { } and ( ) means that this is pushed into next line :) $ represent each step after tab.

TypeScript has own components and own snippets. Use search or just type ts before every component snippet.

I.E. tsrcc

React Hooks

• Hooks from official docs are added with hook name as prefix.

mhkuseCommonHook

import { useSelector, useDispatch } from 'react-redux'

import { firstReducer } from 'store'

export const usesecond = (props?: any) => {
  const third = useSelector((state: any) => state.third)
  const dispatch = useDispatch()

  return {
    ...third,
    firstReducer,
    dispatch,
    useSelector,
  }
}

mhkuseCustomHook

import { usefirst } from 'hook'

type Props = {}
export const useHandlesecond = (props?: Props) => {
  const { dispatch } = usefirst()

  const handleFun = (params?: any) => {}

  return {
    handleFun,
  }
}

Basic Methods

Prefix	Method
mhkimp→	import moduleName from 'module'
mhkimn→	import 'module'
mhkimd→	import { destructuredModule } from 'module'
mhkime→	import * as alias from 'module'
mhkima→	import { originalName as aliasName} from 'module'
mhkexp→	export default moduleName
mhkexd→	export { destructuredModule } from 'module'
mhkexa→	export { originalName as aliasName} from 'module'
mhkenf→	export const functionName = (params) => { }
mhkedf→	export default (params) => { }
mhkednf→	export default function functionName(params) { }
mhkmet→	methodName = (params) => { }
mhkfre→	arrayName.forEach(element => { }
mhkfof→	for(let itemName of objectName { }
mhkfin→	for(let itemName in objectName { }
mhkanfn→	(params) => { }
mhknfn→	const functionName = (params) => { }
mhkdob→	const {propName} = objectToDescruct
mhkdar→	const [propName] = arrayToDescruct
mhksti→	setInterval(() => { }, intervalTime
mhksto→	setTimeout(() => { }, delayTime
mhkprom→	return new Promise((resolve, reject) => { }
mhkcmmb→	comment block
mhkcp→	const { } = this.props
mhkcs→	const { } = this.state

React

Prefix	Method
mhkimr→	import React from 'react'
mhkimrd→	import ReactDOM from 'react-dom'
mhkimrc→	import React, { Component } from 'react'
mhkimrpc→	import React, { PureComponent } from 'react'
mhkimrm→	import React, { memo } from 'react'
mhkimrr→	import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'
mhkimbr→	import { BrowserRouter as Router} from 'react-router-dom'
mhkimbrc→	import { Route, Switch, NavLink, Link } from react-router-dom'
mhkimbrr→	import { Route } from 'react-router-dom'
mhkimbrs→	import { Switch } from 'react-router-dom'
mhkimbrl→	import { Link } from 'react-router-dom'
mhkimbrnl→	import { NavLink } from 'react-router-dom'
mhkimrs→	import React, { useState } from 'react'
mhkimrse→	import React, { useState, useEffect } from 'react'
mhkredux→	import { connect } from 'react-redux'
mhkest→	this.state = { }
mhkcdm→	componentDidMount = () => { }
mhkscu→	shouldComponentUpdate = (nextProps, nextState) => { }
mhkcdup→	componentDidUpdate = (prevProps, prevState) => { }
mhkcwun→	componentWillUnmount = () => { }
mhkgdsfp→	static getDerivedStateFromProps(nextProps, prevState) { }
mhkgsbu→	getSnapshotBeforeUpdate = (prevProps, prevState) => { }
mhksst→	this.setState({ })
mhkssf→	this.setState((state, props) => return { })
mhkprops→	this.props.propName
mhkstate→	this.state.stateName
mhkrcontext→	const $1 = React.createContext()
mhkcref→	this.$1Ref = React.createRef()
mhkfref→	const ref = React.createRef()
mhkbnd→	this.methodName = this.methodName.bind(this)

React Native

Prefix	Method
mhkimrn→	import { $1 } from 'react-native'
mhkrnstyle→	const styles = StyleSheet.create({})

Redux

Prefix	Method
mhkrxaction→	redux action template
mhkrxconst→	export const $1 = '$1'
mhkrxreducer→	redux reducer template
mhkrxselect→	redux selector template
mhkrxslice→	redux slice template

PropTypes

Prefix	Method
mhkpta→	PropTypes.array
mhkptar→	PropTypes.array.isRequired
mhkptb→	PropTypes.bool
mhkptbr→	PropTypes.bool.isRequired
mhkptf→	PropTypes.func
mhkptfr→	PropTypes.func.isRequired
mhkptn→	PropTypes.number
mhkptnr→	PropTypes.number.isRequired
mhkpto→	PropTypes.object
mhkptor→	PropTypes.object.isRequired
mhkpts→	PropTypes.string
mhkptsr→	PropTypes.string.isRequired
mhkptnd→	PropTypes.node
mhkptndr→	PropTypes.node.isRequired
mhkptel→	PropTypes.element
mhkptelr→	PropTypes.element.isRequired
mhkpti→	PropTypes.instanceOf(name)
mhkptir→	PropTypes.instanceOf(name).isRequired
mhkpte→	PropTypes.oneOf([name])
mhkpter→	PropTypes.oneOf([name]).isRequired
mhkptet→	PropTypes.oneOfType([name])
mhkptetr→	PropTypes.oneOfType([name]).isRequired
mhkptao→	PropTypes.arrayOf(name)
mhkptaor→	PropTypes.arrayOf(name).isRequired
mhkptoo→	PropTypes.objectOf(name)
mhkptoor→	PropTypes.objectOf(name).isRequired
mhkptsh→	PropTypes.shape({ })
mhkptshr→	PropTypes.shape({ }).isRequired
mhkptany→	PropTypes.any
mhkptypes→	static propTypes = {}

Console

Prefix	Method
mhkclg→	console.log(object)
mhkclo→	console.log(`object`, object)
mhkclj→	console.log(`object`, JSON.stringify(object, null, 2))
mhkctm→	console.time(`timeId`)
mhkcte→	console.timeEnd(`timeId`)
mhkcas→	console.assert(expression,object)
mhkccl→	console.clear()
mhkcco→	console.count(label)
mhkcdi→	console.dir
mhkcer→	console.error(object)
mhkcgr→	console.group(label)
mhkcge→	console.groupEnd()
mhkctr→	console.trace(object)
mhkcwa→	console.warn
mhkcin→	console.info

React Components

mhkrcc

import React, { Component } from "react";

export default class FileName extends Component {
  render() {
    return <div>$2</div>;
  }
}

mhkrce

import React, { Component } from "react";

export class FileName extends Component {
  render() {
    return <div>$2</div>;
  }
}

export default $1;

mhkrcep

import React, { Component } from "react";
import PropTypes from "prop-types";

export class FileName extends Component {
  static propTypes = {};

  render() {
    return <div>$2</div>;
  }
}

export default $1;

mhkrpc

import React, { PureComponent } from "react";

export default class FileName extends PureComponent {
  render() {
    return <div>$2</div>;
  }
}

mhkrpcp

import React, { PureComponent } from "react";
import PropTypes from "prop-types";

export default class FileName extends PureComponent {
  static propTypes = {};

  render() {
    return <div>$2</div>;
  }
}

mhkrpce

import React, { PureComponent } from "react";
import PropTypes from "prop-types";

export class FileName extends PureComponent {
  static propTypes = {};

  render() {
    return <div>$2</div>;
  }
}

export default FileName;

mhkrccp

import React, { Component } from "react";
import PropTypes from "prop-types";

export default class FileName extends Component {
  static propTypes = {
    $2: $3,
  };

  render() {
    return <div>$4</div>;
  }
}

mhkrfcp

import React from "react";
import PropTypes from "prop-types";

function $1(props) {
  return <div>$0</div>;
}

$1.propTypes = {};

export default $1;

mhkrfc

import React from "react";

export default function $1() {
  return <div>$0</div>;
}

mhkrfce

import React from "react";

function $1() {
  return <div>$0</div>;
}

export default $1;

mhkrafcp

import React from "react";
import PropTypes from "prop-types";

const $1 = (props) => {
  return <div>$0</div>;
};

$1.propTypes = {};

export default $1;

mhkrafc

import React from "react";

export const $1 = () => {
  return <div>$0</div>;
};

mhkrafce

import React from "react";

const $1 = () => {
  return <div>$0</div>;
};

export default $1;

mhkrmc

import React, { memo } from "react";

export default memo(function $1() {
  return <div>$0</div>;
});

mhkrmcp

import React, { memo } from "react";
import PropTypes from "prop-types";

const $1 = memo(function $1(props) {
  return <div>$0</div>;
});

$1.propTypes = {};

export default $1;

mhkrcredux

import React, { Component } from "react";
import { connect } from "react-redux";

export class FileName extends Component {
  render() {
    return <div>$4</div>;
  }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);

mhkrcreduxp

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

export class FileName extends Component {
  static propTypes = {
    $2: $3,
  };

  render() {
    return <div>$4</div>;
  }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);

mhkrfcredux

import React, { Component } from "react";
import { connect } from "react-redux";

export const FileName = () => {
  return <div>$4</div>;
};

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);

mhkrfreduxp

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

export const FileName = () => {
  return <div>$4</div>;
};

FileName.propTypes = {
  $2: $3,
};

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);

mhkreduxmap

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

React Native Components

mhkrnc

import React, { Component } from "react";
import { Text, View } from "react-native";

export default class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

mhkrncs

import React, { Component } from "react";
import { Text, StyleSheet, View } from "react-native";

export default class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({});

mhkrnce

import React, { Component } from "react";
import { Text, View } from "react-native";

export class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

export default $1;

mhkrnces

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";

export class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

export default $1;

const styles = StyleSheet.create({});

mhkrnf

import React from "react";
import { View, Text } from "react-native";

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  );
}

mhkrnfs

import React from "react";
import { StyleSheet, View, Text } from "react-native";

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  );
}

const styles = StyleSheet.create({});

mhkrnfe

import React from "react";
import { View, Text } from "react-native";

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  );
};

export default $1;

mhkrnfes

import React from "react";
import { StyleSheet, View, Text } from "react-native";

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  );
};

export default $1;

const styles = StyleSheet.create({});

mhktsrnfe

import { ContainerCom } from "components";
import { useHandleSettings } from "hook";

type Props = {};

export const $1 = (props: Props) => {
  const { currentTheme } = useHandleSettings(props);

  return (
    <ContainerCom
      text="$1"
      safeAreaBgColor="screenBg"
      headerBgColor="screenBg"
      headerTextProps={{ color: "text" }}
      isFooter={false}
      isCommingSoon
      back
      {...props}
    ></ContainerCom>
  );
};

mhktsrnfes

import { StyleSheet } from "react-native";

import { ContainerCom } from "components";
import { useHandleSettings } from "hook";

type Props = {};

export const $1 = (props: Props) => {
  const { currentTheme } = useHandleSettings(props);

  return (
    <ContainerCom
      text="$1"
      safeAreaBgColor="screenBg"
      headerBgColor="screenBg"
      headerTextProps={{ color: "text" }}
      isFooter={false}
      isCommingSoon
      back
      {...props}
    ></ContainerCom>
  );
};

const styles = StyleSheet.create({});

mhktsrnfces

import { memo, useContext } from 'react'
import { View, StyleSheet} from 'react-native'
import { ThemeContext } from 'styled-components'

export const $1: React.FC<CommonComponents.$1> = memo(
  ({ children, ...props }) => {
    const themeContext = useContext(ThemeContext)

    return <View>{children}</View>
  }
)

const styles = StyleSheet.create({})

mhktsrnfcess

import { memo, useContext } from "react";
import { ThemeContext } from "styled-components";

import { $1 } from "theme";

export const $2: React.FC<CommonComponents.$2> = memo(
  ({ children, ...props }) => {
    const themeContext = useContext(ThemeContext);

    return <$1>{children}</$1>;
  }
);

Others

mhkcmmb

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

mhkdesc

describe("$1", () => {
  $2;
});

mhktest

test("should $1", () => {
  $2;
});

mhktit

it("should $1", () => {
  $2;
});

mhkstest

import React from "react";
import renderer from "react-test-renderer";

import { $1 } from "../$1";

describe("<$1 />", () => {
  const defaultProps = {};
  const wrapper = renderer.create(<$1 {...defaultProps} />);

  test("render", () => {
    expect(wrapper).toMatchSnapshot();
  });
});

mhksrtest

import React from "react";
import renderer from "react-test-renderer";
import { Provider } from "react-redux";

import store from "src/store";
import { $1 } from "../$1";

describe("<$1 />", () => {
  const defaultProps = {};
  const wrapper = renderer.create(
    <Provider store={store}>
      <$1 {...defaultProps} />)
    </Provider>
  );

  test("render", () => {
    expect(wrapper).toMatchSnapshot();
  });
});

mhksntest

import "react-native";
import React from "react";
import renderer from "react-test-renderer";

import $1 from "../$1";

describe("<$1 />", () => {
  const defaultProps = {};

  const wrapper = renderer.create(<$1 {...defaultProps} />);

  test("render", () => {
    expect(wrapper).toMatchSnapshot();
  });
});

mhksnrtest

import "react-native";
import React from "react";
import renderer from "react-test-renderer";
import { Provider } from "react-redux";

import store from "src/store/configureStore";
import $1 from "../$1";

describe("<$1 />", () => {
  const defaultProps = {};
  const wrapper = renderer.create(
    <Provider store={store}>
      <$1 {...defaultProps} />
    </Provider>
  );

  test("render", () => {
    expect(wrapper).toMatchSnapshot();
  });
});

mhkhocredux

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

export const mapStateToProps = (state) => ({});

export const mapDispatchToProps = {};

export const $1 = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />;

  hocComponent.propTypes = {};

  return hocComponent;
};

export default (WrapperComponent) =>
  connect(mapStateToProps, mapDispatchToProps)($1(WrapperComponent));

mhkhoc

import React from "react";
import PropTypes from "prop-types";

export default (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />;

  hocComponent.propTypes = {};

  return hocComponent;
};