Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>React Snippets for MarioNew to Visual Studio Code? Get it now.
React Snippets for Mario

React Snippets for Mario

MeePwn

|
401 installs
| (1) | Free
react snippets for mario
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

React Snippets

ts/tsx js/jsx 代码提示

  • ///:
/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
  • mi:
import $1 from '$2';
  • mis:
import styled from 'styled-components';
  • minav:
import { NavigationActions } from 'react-navigation';
  • mimed:
import { actionCreator, actions, ActionsObservable, BATCH_ACTIONS, epicCreator, flowable, IAction, mutate, replace } from 'mario-meditation';
  • miuti:
import { $1 } from 'mario-utilities';
  • miarch:
import { $1 } from 'mario-architecture-components';
  • mirn:
import {
  Button,
  Image,
  ImageStyle,
  StyleSheet,
  Text,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';
  • ps:
this.props.
  • st:
this.state.
  • sst:
this.setState({
  $1
});
  • ssf:
this.setState((prevState: any, props: any) => ({
  $1
}));
  • source:
source={$1}
  • style:
style={$1}
  • numberOfLines:
numberOfLines={$1}
  • activeOpacity:
activeOpacity={$1}
  • resizeMode:
resizeMode=$1
  • cover:
'cover'
  • contain:
'contain'
  • stretch:
'stretch'
  • repeat:
'repeat'
  • center:
'center'
  • onPress:
onPress={$1}
  • onChangeText:
onChangeText={$1}
  • onChange:
onChange={$1}
  • value:
value={$1}
  • multiline:
multiline={$1}
  • actionCreator:
actionCreator($1)
  • createAction:
createAction($1)($2)$3
  • mreducer:
$1(state: any, payload: any) { return mutate(state, { $1: payload }); },
  • arrow:
($1) => {
  $2
}
  • setTimeout:
setTimeout(() => {
  $1
});
  • promise:
new Promise((resolve, reject) => {
  $1
});
  • fore:
$1.forEach((item: any, index: number) => {
  $2
});
  • map:
$1.map((item: any) => $2);
  • filter:
$1.filter((item: any) => $2);
  • dob:
const { $2 } = $1;
  • dar:
const [ $2 ] = $1;
  • bnd:
@bind(({  }: any) => {
  $1
})
  • constructor:
public constructor(props: Readonly<${1:IProps}>) {
  super(props);

  $1
}
  • cwm:
public componentWillMount() {
  $1
}
  • cdm:
public componentDidMount() {
  $1
}
  • cwum:
public componentWillUnmount() {
  $1
}
  • cwrp:
public componentWillReceiveProps(nextProps: Readonly<any>) {
  $1
}
  • cwud:
public componentWillUpdate(nextProps: Readonly<any>, nextState: Readonly<any>) {
  $1
}
  • scud:
public shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<any>) {
  $1
}
  • cdud:
public componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>) {
  $1
}
  • cdc:
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
  $1
}
  • ren:
public render() {
  return (
    $1
  );
}
  • pt:
$1: PropTypes.$2,
  • ptr:
$1: PropTypes.$2.isRequired,
  • ssc:
const styles = StyleSheet.create<IStyle>({
  container: {
    $1
  },

});
  • flex:
flex: $1,
  • justifyContent:
justifyContent: '${1:center}',
  • ai:
alignItems: '${1:center}',
  • as:
alignSelf: '${1:center}',
  • flex-start:
'flex-start'
  • flex-end:
'flex-end'
  • center:
'center'
  • space-between:
'space-between'
  • space-around:
'space-around'
  • borderBottomWidth:
borderBottomWidth: $1,
  • borderLeftWidth:
borderLeftWidth: $1,
  • borderRightWidth:
borderRightWidth: $1,
  • borderTopWidth:
borderTopWidth: $1,
  • borderWidth:
borderWidth: $1,
  • flexDirection:
flexDirection: $1,
  • row:
'row'
  • row-reverse:
'row-reverse'
  • column:
'column'
  • column-reverse:
'column-reverse'
  • height:
height: $1,
  • width:
width: $1,
  • margin:
margin: $1,
  • marginBottom:
marginBottom: $1,
  • marginLeft:
marginLeft: $1,
  • marginRight:
marginRight: $1,
  • marginTop:
marginTop: $1,
  • marginHorizontal:
marginHorizontal: $1,
  • marginVertical:
marginVertical: $1,
  • maxHeight:
maxHeight: $1,
  • maxWidth:
maxWidth: $1,
  • minHeight:
minHeight: $1,
  • minWidth:
minWidth: $1,
  • overflow:
overflow: $1,
  • visible:
'visible'
  • hidden:
'hidden'
  • scroll:
'scroll'
  • padding:
padding: $1,
  • paddingBottom:
paddingBottom: $1,
  • paddingHorizontal:
paddingHorizontal: $1,
  • paddingLeft:
paddingLeft: $1,
  • paddingRight:
paddingRight: $1,
  • paddingTop:
paddingTop: $1,
  • paddingVertical:
paddingVertical: $1,
  • position:
position: $1,
  • zIndex:
zIndex: $1,
  • top:
top: $1,
  • left:
left: $1,
  • right:
right: $1,
  • bottom:
bottom: $1,
  • fontSize:
fontSize: $1,
  • fontWeight:
fontWeight: '$1',
  • bold:
'bold'
  • backgroundColor:
backgroundColor: '$1',
  • borderColor:
borderColor: '$1',
  • borderTopColor:
borderTopColor: '$1',
  • borderRightColor:
borderRightColor: '$1',
  • borderBottomColor:
borderBottomColor: '$1',
  • borderLeftColor:
borderLeftColor: '$1',
  • borderRadius:
borderRadius: $1,
  • borderTopLeftRadius:
borderTopLeftRadius: $1,
  • borderTopRightRadius:
borderTopRightRadius: $1,
  • borderBottomLeftRadius:
borderBottomLeftRadius: $1,
  • borderBottomRightRadius:
borderBottomRightRadius: $1,
  • borderStyle:
borderStyle: '$1',
  • solid:
'solid'
  • dotted:
'dotted'
  • dashed:
'dashed'
  • opacity:
opacity: $1
  • newe:
$1Epic(action$: ActionsObservable, state$: StateObservable<any>, dependencies: any) {
  return epicCreator(action$)($2)((action: IAction) =>
    $3Task(action.payload)
      .pipe(
        map((response: any) => {
          $4
          return actionCreator(NETWORK_SUCCESS);
        }),
        catchError((error: IError) => {
          return flowable(actionCreator(NETWORK_FAILURE));
        }),
      ),
  );
},
  • rcv
/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import React from 'react';

import { IViewModelProps } from '../view-model/index';

export default (props: Readonly<IViewModelProps>) => (
  <div style={styles.container}>

  </div>
);

const styles = {
  container: {

  },

};

  • rncv
/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import React from 'react';
import {
  Button,
  Image,
  ImageStyle,
  StyleSheet,
  Text,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';

import { IViewModelProps } from '../view-model/index';

export interface IStyle {
  container: ViewStyle;

}

export default (props: Readonly<IViewModelProps>) => (
  <View style={styles.container}>

  </View>
);

const styles = StyleSheet.create<IStyle>({
  container: {

  },

});

  • rcc
/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { mario, bind } from 'mario-meditation';
import { inject, ViewModel } from 'mario-architecture-components';

import { $1Selector } from '../selector/index';
import { $1ViewModel, IViewModelProps } from '../view-model/index';
import { $1View } from '../view/index';

mario.model(require('../models/index'));

export default bind($1Selector)(inject<IViewModelProps, ViewModel<IViewModelProps>>($1View, $1ViewModel));

  • rcdc
/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { mario, bind } from 'mario-meditation';
import { inject, ViewModel } from 'mario-architecture-components';

import { $1Selector } from '../selector/index';
import { $1ViewModel, IViewModelProps } from '../view-model/index';
import { $1View } from '../view/index';

export default dynamic({
  models: () => [ require('../models/index') ],
  component: () => Promise.resolve(bind($1Selector)(inject<IViewModelProps, ViewModel<IViewModelProps>>($1View, $1ViewModel))),
});

  • rcm
/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { actionCreator, actions, ActionsObservable, BATCH_ACTIONS, epicCreator, flowable, IAction, mutate } from 'mario-meditation';
import { log, toString } from 'mario-utilities';
import { map, catchError } from 'rxjs/operators';

import { NETWORK_FAILURE, NETWORK_SUCCESS } from 'dataflow/actions';
import { IError, IResponse } from 'task';
// import {  } from '../actions/index';
// import {  } from '../task/index';

export default {
  name: '$1',
  immutable: true,
  initialState: {

  },
  epics: {

  },
};

  • rcvm
/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { ViewModel } from 'mario-architecture-components';
import { actions, actionCreator, createAction, IAction } from 'mario-meditation';

import {  } from '../actions/index';

export interface IModel {

}

export interface IHandlers {

}

export interface IViewModelProps extends IModel, IHandlers {
  navigation: any;
  dispatch: (action: IAction) => any;
}

export default class extends ViewModel<IViewModelProps> {

  public handlers = {

  };

}


  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft