# vscode-react-ts-snippets

> Code snippets for react in typescript

Latest version **2.1.0** (published 2019-03-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install vscode-react-ts-snippets
pnpm add vscode-react-ts-snippets
yarn add vscode-react-ts-snippets
bun add vscode-react-ts-snippets
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2019-03-14 |
| First published | 2019-01-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 100.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | weffe |
| Maintainers | weffe |
| Keywords | react, vscode, typescript, vscode-extension, snippets |

## Links

- npm: https://www.npmjs.com/package/vscode-react-ts-snippets
- Repository: https://github.com/Weffe/vscode-react-ts-snippets
- Homepage: https://github.com/Weffe/vscode-react-ts-snippets#readme
- Issues: https://github.com/Weffe/vscode-react-ts-snippets/issues
- npm.io page: https://npm.io/package/vscode-react-ts-snippets

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2019-03-14
- 1.1.0 — 2019-01-31
- 1.0.2 — 2019-01-31
- 1.0.1 — 2019-01-31
- 1.0.0 — 2019-01-31

## README

# React + Typescript Code Snippets

> Forked from https://github.com/infeng/vscode-react-typescript

-------------------

[![version badge](https://img.shields.io/visual-studio-marketplace/v/weffe.vscode-react-ts-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=weffe.vscode-react-ts-snippets)

This extension contains opinionated code snippets for React with Typescript.

VS Marketplace link: https://marketplace.visualstudio.com/items?itemName=weffe.vscode-react-ts-snippets

## Installation

In order to install an extension you need to launch the Command Pallete (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions.
There you have either the option to show the already installed snippets or install new ones.

Launch VS Code Quick Open (Ctrl + P or Cmd + P), paste the following command, and press enter.

`ext install weffe.vscode-react-ts-snippets`

Alternatively you can open the extensions panel and search for 'React + Typescript Code Snippets'.

## Alternative Installation

If you want to manually install the snippets then simply copy the `snippets.json` content from here: https://raw.githubusercontent.com/Weffe/vscode-react-ts-snippets/master/snippets/snippets.json

Next, in VS Code go to File -> Preferences -> User Snippets

In the popup window, search for `typescriptreact` and click on the option.

Finally, this will take you to a new window where you can paste in the copied snippets and then save!

Now, you will have access to the snippets across VS Code.

## Supported languages (file extensions)

* TypeScript (.ts)
* TypeScript React (.tsx)

## Snippets

Below is a list of all available snippets and the triggers of each one. The **⇥** means the `TAB` key.

| Trigger  | Content |
| -------: | ------- |
| `tsrcc →`    | `class component skeleton` |
| `tsrcfull →` | `class component skeleton with Props, State, and constructor` |
| `tsrcjc →`   | `class component skeleton without import and default export lines` |
| `tsrpcc →`   | `class purecomponent skeleton` |
| `tsrpcjc →`  | `class purecomponent without import and default export lines` |
| `tsrpfc →`   | `pure function component skeleton` |
| `tsrpfcwh →` | `pure function component skeleton with hooks` |
| `tsrfc →`    | `functional component skeleton` |
| `conc →`     | `class default constructor with props and context` |
| `cwm →`      | `componentWillMount method` |
| `ren →`      | `render method` |
| `cdm →`      | `componentDidMount method` |
| `cwrp →`     | `componentWillReceiveProps method` |
| `scu →`      | `shouldComponentUpdate method` |
| `cwu →`      | `componentWillUpdate method` |
| `cdu →`      | `componentDidUpdate method` |
| `cwum →`     | `componentWillUnmount method` |
| `gdsfp →`    | `getDerivedStateFromProps method` |
| `gsbu →`     | `getSnapshotBeforeUpdate method` |
| `sst →`      | `this.setState with object as parameter` |
| `bnd →`      | `binds the this of method inside the constructor` |
| `met →`      | `simple method` |
| `imt →`      | `import a dependency` |
| `imta →`     | `import everything from a dependency` |
| `imtd →`     | `import default object from a dependency` |
| `tsrcm →`    | `Create a React + MobX Component` |
| `tsrcmfull →`| `Create a stateful React + MobX Component` |
| `tsrcmrr →`  | `Create a React + MobX + React-Router Component` |
| `tsrcmrrfull →`    | `Create a stateful React + MobX + React-Router Component` |

## License

MIT

---
_Source: https://npm.io/package/vscode-react-ts-snippets · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._