diff --git a/README.md b/README.md index b40c605..0e81a58 100644 --- a/README.md +++ b/README.md @@ -16,83 +16,83 @@ that work the way that you would expect, not just a copy of the documentation. ## Snippets -| Snippet | Renders | -| ------- | -------------------------------- | -| `imr` | Import React | -| `imrc` | Import React / Component | -| `imrd` | Import ReactDOM | -| `imrs` | Import React / useState | -| `imrse` | Import React / useState useEffect| -| `impt` | Import PropTypes | -| `impc` | Import React / PureComponent | -| `cc` | Class Component | -| `ccc` | Class Component With Constructor | -| `cpc` | Class Pure Component | -| `fc` | Function Component | -| `cdm` | componentDidMount | -| `uef` | useEffect Hook | -| `cwm` | componentWillMount | -| `cwrp` | componentWillReceiveProps | -| `gds` | getDerivedStateFromProps | -| `scu` | shouldComponentUpdate | -| `cwu` | componentWillUpdate | -| `cdu` | componentDidUpdate | -| `cwu` | componentWillUpdate | -| `cdc` | componentDidCatch | -| `gsbu` | getSnapshotBeforeUpdate | -| `ss` | setState | -| `ssf` | Functional setState | +| Snippet | Renders | +| ------- | --------------------------------------------- | +| `imr` | Import React | +| `imrc` | Import React / Component | +| `imrd` | Import ReactDOM | +| `imrs` | Import React / useState | +| `imrse` | Import React / useState useEffect | +| `impt` | Import PropTypes | +| `impc` | Import React / PureComponent | +| `cc` | Class Component | +| `ccc` | Class Component With Constructor | +| `cpc` | Class Pure Component | +| `sfc` | Stateless Function Component | +| `cdm` | componentDidMount | +| `uef` | useEffect Hook | +| `cwm` | componentWillMount | +| `cwrp` | componentWillReceiveProps | +| `gds` | getDerivedStateFromProps | +| `scu` | shouldComponentUpdate | +| `cwu` | componentWillUpdate | +| `cdu` | componentDidUpdate | +| `cwu` | componentWillUpdate | +| `cdc` | componentDidCatch | +| `gsbu` | getSnapshotBeforeUpdate | +| `ss` | setState | +| `ssf` | Functional setState | | `usf` | Declare a new state variable using State Hook | -| `ren` | render | -| `rprop` | Render Prop | -| `hoc` | Higher Order Component | +| `ren` | render | +| `rprop` | Render Prop | +| `hoc` | Higher Order Component | ## Full Expansions ### imr - Import React ```javascript -import * as React from 'react'; +import * as React from "react"; ``` ### imrc - Import React, Component ```javascript -import * as React from 'react'; -import { Component } from 'react'; +import * as React from "react"; +import { Component } from "react"; ``` ### imrd - Import ReactDOM ```javascript -import ReactDOM from 'react-dom'; +import ReactDOM from "react-dom"; ``` ### imrs - Import React, useState ```javascript -import * as React from 'react'; -import { useState } from 'react'; +import * as React from "react"; +import { useState } from "react"; ``` ### imrse - Import React, useState, useEffect ```javascript -import * as React from 'react'; -import { useState, useEffect } from 'react'; +import * as React from "react"; +import { useState, useEffect } from "react"; ``` ### impt - Import PropTypes ```javascript -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; ``` ### impc - Import PureComponent ```javascript -import * as React from 'react'; -import { PureComponent } from 'react'; +import * as React from "react"; +import { PureComponent } from "react"; ``` ### cc - Class Component @@ -136,7 +136,7 @@ class | extends PureComponent { export default |; ``` -### fc - Function Component +### sfc - Stateless Function Component ```javascript const | = props => { @@ -155,7 +155,7 @@ componentDidMount() { ``` ### uef - useEffect Hook - + ```javascript useEffect(() => { | @@ -256,7 +256,8 @@ this.setState(prevState => { ```javascript const [|, set|] = useState(); ``` -*Hit Tab to apply CamelCase to function. e.g. [count, setCount]* + +_Hit Tab to apply CamelCase to function. e.g. [count, setCount]_ ### ren - render diff --git a/snippets/snippets-ts.json b/snippets/snippets-ts.json index ccb9f52..2a8d965 100644 --- a/snippets/snippets-ts.json +++ b/snippets/snippets-ts.json @@ -116,8 +116,8 @@ "description": "Class Component with Constructor" }, - "Function Component": { - "prefix": "fc", + "Stateless Function Component": { + "prefix": "sfc", "body": [ "interface $1Props {", "\t$2",