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 IFileName {}
export interface IFileName {}

class FileName extends Component<IFileName, IFileName> {
  state = {};

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

export { FileName };

cpc

import React, { Component } from "react";

export interface IFileName {}

class FileName extends Component<IFileName> {
  render() {
    return <div />;
  }
}

export { FileName };

fc

import React from "react";

export interface IFileName {}

const FileName: React.FC<IFileName> = ({}) => {
  return <div />;
};

export { FileName };

React Native snippets

imrn

import { ModuleName } from "react-native";

ncc

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

export interface IFileName {}
export interface IFileName {}

class FileName extends Component<IFileName, IFileName> {
  state = {};

  render() {
    return <View />;
  }
}

export { FileName };

ncpc

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

export interface IFileName {}

class FileName extends Component<IFileName> {
  render() {
    return <View />;
  }
}

export { FileName };

nfc

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

export interface IFileName {}

export const FileName: React.FC<IFileName> = ({}) => {
  return <View />;
};

export { FileName };

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);

createStore

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";

const preloadedState = {};

const middleware = [...getDefaultMiddleware()];

export const store = configureStore({
  preloadedState,
  reducer,
  middleware,
  devTools: process.env.NODE_ENV !== "production"
});

createReducer

import { createReducer } from "@reduxjs/toolkit";

const INITIAL_STATE = {};

const middleware = [...getDefaultMiddleware()];

export const FileName = createReducer(INITIAL_STATE, {
  [ActionType]: (state, action) => {}
});

createAction

import { createAction } from "@reduxjs/toolkit";

export const ActionName = createAction(ActionType);

createSlice

import { createSlice } from "@reduxjs/toolkit";

const INITIAL_STATE = {};

export const FileName = createSlice({
  name: "FileName",
  initialState: INITIAL_STATE,
  reducers: {
    [ActionType]: (state, action) => {}
  }
});

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