ts-react-snippets

React/React Native/Redux TypeScript Snippets

Snippets for React/React Native/Redux with JavaScript and TypeScript lovers

Link for marketplace extension

https://marketplace.visualstudio.com/items?itemName=vadymbiliuk.ts-react-snippets

Supported languages and file extensions

JavaScript

.js/.jsx

TypeScript

.ts/.tsx

Usage

Please hit combination for snippet search:

MacOS

cmd + shift + p

Windows/Linux

ctrl + shift + p

Snippets overview

React snippets

Please remember that examples below created for TypeScript. They are same for JavaScript in .js/.jsx files but without TypeScript features like interface etc.

imr

import React from "react";

impt

import PropTypes from "prop-types";

cc

import React, { Component } from "react";
 
export interface IYourFileName {}
export interface IYourFileName {}
 
export class YourName extends Component<IYourFileName, IYourFileName> {
  state = {};
 
  render() {
    return <div />;
  }
}

cpc

import React, { Component } from "react";
 
export interface IYourFileName {}
 
export class YourFileName extends Component<YourFileName> {
  render() {
    return <div />;
  }
}

fc

import React from "react";
 
export interface IYourFileName {}
 
export const YourFileName: React.FC<IYourFileName> = ({}) => {
  return <div />;
};

React Native snippets

imrn

import { ModuleName } from "react-native";

ncc

import React, { Component } from "react";
import { View } from "react-native";
 
export interface IYourFileName {}
export interface IYourFileName {}
 
export class YourName extends Component<IYourFileName, IYourFileName> {
  state = {};
 
  render() {
    return <View />;
  }
}

ncpc

import React, { Component } from "react";
import { View } from "react-native";
 
export interface IYourFileName {}
 
export class YourFileName extends Component<YourFileName> {
  render() {
    return <View />;
  }
}

nfc

import React from "react";
import { View } from "react-native";
 
export interface IYourFileName {}
 
export const YourFileName: React.FC<IYourFileName> = ({}) => {
  return <View />;
};

React Hooks

useState

const [state, setstate] = useState(defaultState);

useEffect

useEffect(() => {}, []);

useContext

const value = useContext(MyContext);

useReducer

const [state, dispatch] = useReducer(reducer, initialState);

useCallback

const memoizedCallback = useCallback(() => {}, []);

useMemo

const memoizedValue = useMemo(() => {}, []);

useRef

const refContainer = useRef(initialValue);

useImperativeHandle

useImperativeHandle(initialValue, () => {}, []);

useLayoutEffect

useLayoutEffect(() => {}, []);

useDebugValue

useDebugValue(value);

Redux

condux

import { connect } from "react-redux";
import { ViewName } from "ViewPath";
 
const mapStateToProps = state => ({});
 
const mapDispatchToProps = {};
 
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ViewName);

Redux Hooks

useSelector

const selectedData = useSelector(state => state.YourObject);

useDispatch

const dispatch = useDispatch();

useStore

const store = useStore();

Native TypeScript

Please remember that all native TypeScript snippets are included in .tsx files too

int

export interface IInterfaceName {}

tp

export type TypeName = type;

func

export function funcName(): funcReturnType {}

afunc

export const funcName = (): funcReturnType => {};

cls

export class className {
  // Fields:
  private readonly _fieldName: fieldType;
 
  // Properties:
  public fieldName: fieldType = propertyValue;
 
  constructor() {
    this._fieldName = this.fieldName;
  }
}

acls

export abstract class className {
  // Properties:
  public propertyName: propertyType = propertyValue;
}

cpf

 
private readonly _fieldName: fieldType;
 

cpp

 
public propertyName: propertyType = propertyValue;
 

Contributing

Pull requests are always welcome in develop branch. For major changes, please open an issue first to discuss what you would like to change.

License

MIT