Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>T SnippetNew to Visual Studio Code? Get it now.
T Snippet

T Snippet

Shubham jangid

|
67 installs
| (0) | Free
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

tfc: TFunctionalComponent

Creates a functional component with propTypes and defaultProps.

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

import "./HelloWorld.module.scss";

const HelloWorld = (props) => {
  return <div>HelloWorld</div>;
};

HelloWorld.propTypes = {};
HelloWorld.defaultProps = {};

export default HelloWorld;

tfca: TFunctionalComponentWithActionHandler

creates a functional component with actionHandler, propTypes and defaultProps

import React from "react";
import PropTypes from "prop-types";
import { compose } from "recompose";

import _noop from "lodash/noop";

import withActionHandlers from "tcomponents/connectors/withActionHandlers";
import { EMPTY_OBJECT } from "tbase/app.constants";

import ActionHandlers from "./HelloWorld.actionHandlers";
import INITIAL_STATE from "./HelloWorld.constants";

import "./HelloWorld.module.scss";

const HelloWorld = ({ onAction }) => {
  return <div>HelloWorld</div>;
};

HelloWorld.propTypes = {
  onAction: PropTypes.func,
};
HelloWorld.defaultProps = {
  onAction: _noop,
};

export default compose(
  withActionHandlers(helloWorldActionHandlers, INITIAL_STATE)
)(HelloWorld);

tfcam: TFunctionalComponentWithActionHandlerMapStateToProps

creates a functional component with actionHandler, propTypes and defaultProps

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

import _noop from "lodash/noop";

import withActionHandlers from "tcomponents/connectors/withActionHandlers";
import { EMPTY_OBJECT } from "tbase/app.constants";

import ActionHandlers from "./HelloWorld.actionHandlers";
import INITIAL_STATE from "./HelloWorld.constants";

import "./HelloWorld.module.scss";

const HelloWorld = ({ onAction }) => {
  return <div>HelloWorld</div>;
};

HelloWorld.propTypes = {
  onAction: PropTypes.func,
};
HelloWorld.defaultProps = {
  onAction: _noop,
};

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

export default compose(
  connect(mapStateToProps),
  withActionHandlers(helloWorldActionHandlers, INITIAL_STATE)
)(HelloWorld);

In addition to these snippets, there are several other snippets for importing various lodash functions such as _noop, _curry,_compact ,_keyBy,_isFunction,_size,_get,_partialRight _property,_map ,_groupBy ,_flow ,_identity ,_filter ,_isNil ,_includes, _toString , and _isEmpty. These can be accessed using their respective prefixes like

_toString

This is a code snippet for importing the _toString method from the Lodash library.

import _toString from "lodash/toString";
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft