Skip to content

Commit

Permalink
Merge pull request #4 from andrew-codes/update-react-snippets
Browse files Browse the repository at this point in the history 
Update react snippets
  • Loading branch information
@andrew-codes
andrew-codes committed Mar 8, 2019
2 parents a67f0f0 + 38ac600 commit 17a259f
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 343 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Expand Up @@ -29,7 +29,6 @@
"homepage": "https://github.com/andrew-codes/vscode-snippets#readme",
"devDependencies": {
"eslint": "^5.15.0",
"htmlencode": "0.0.4",
"lerna": "^3.13.1",
"vsce": "^1.57.1"
}
Expand Down
267 changes: 88 additions & 179 deletions packages/react-snippets/README.md
View file
Expand Up @@ -16,67 +16,30 @@ There you have either the option to show the already installed snippets or insta

## Snippets

### import React (`imr`)
### import React (`rim`)
```javascript
import React from 'react';$0
```
### import React, {Component} (`imrc`)
### import React, {Component} (`ric`)
```javascript
import React, { Component } from 'react';$0
```
### import PropTypes (`impt`)
### import PropTypes (`ript`)
```javascript
import PropTypes from 'prop-types';$0
```
### all inclusive functional component (`nrc`)
```javascript
import PropTypes from 'prop-types';
import React from 'react';

const ${1:componentName} = ({}) => (
${0:<div></div>}
);

${1:componentName}.propTypes = {};

export default ${1:componentName};
```
### all inclusive class component (`nrcc`)
```javascript
import PropTypes from 'prop-types';
import React, { Component } from 'react';

class ${1:componentName} extends Component {
constructor(props, ...rest) {
super(props, ...rest);
this.state = {};
}

render() {
return (
${0:<div></div>}
);
}
}

${1:componentName}.propTypes = {};

export default ${1:componentName};
```
### just functional component (`rc`)
### functional component (`rc`)
```javascript
const ${1:componentName} = ({}) => (
${2:<div></div>}
);

${1:componentName}.propTypes = {};
$0
```
### just class Component (`rcc`)
### class Component (`rcc`)
```javascript
class ${1:componentName} extends Component {
constructor(props, ...rest) {
super(props, ...rest);
constructor() {
super();
this.state = {};
}

Expand All @@ -86,55 +49,56 @@ class ${1:componentName} extends Component {
);
}
}

${1:componentName}.propTypes = {};
$0
```
### default component constructor (`ccon`)
### default component constructor (`rcc`)
```javascript
constructor(props, ...rest) {
super(props, ...rest);
constructor(props) {
super(props);
$1
}$0
```
### constructor; props and context (`cconc`)
```javascript
constructor(props, context, ...rest) {
super(props, context, ...rest);
$1
}$0
```
### componentWillMount (`cwm`)
```javascript
componentWillMount() {$1}$0
}

$0
```
### componentDidMount (`cdm`)
```javascript
componentDidMount() {$1}$0
```
### componentWillReceiveProps (`cwr`)
```javascript
componentWillReceiveProps(nextProps) {$1}$0
componentDidMount() {
$1
}

$0
```
### shouldComponentUpdate (`scu`)
```javascript
shouldComponentUpdate(nextProps, nextState) {$1}$0
```
### componentWillUpdate (`cwup`)
```javascript
componentWillUpdate(nextProps, nextState) {$1}$0
shouldComponentUpdate(nextProps, nextState) {
$1
}

$0
```
### componentDidUpdate (`cdup`)
```javascript
componentDidUpdate(prevProps, prevState) {$1}$0
componentDidUpdate(prevProps, prevState) {
$1
}

$0
```
### componentWillUnmount (`cwum`)
```javascript
componentWillUnmount() {$1}$0
componentWillUnmount() {
$1
}

$0
```
### bound component class method (`ccm`)
### bound component class method (`cm`)
```javascript
${1:methodName} = () => ${1:{}};$0
${1:methodName} = () => ${1:{
}
};

$0
```
### set state (`sst`)
```javascript
Expand All @@ -143,164 +107,109 @@ $0
```
### set state w/ function (`ssf`)
```javascript
this.setState((state, props) => ({$1}));
this.setState(state => ${1:({
})});

$0
```
### destructure class props (`cdp`)
```javascript
const {$1} = this.props;
const {
$1
} = this.props;
$0
```
### destructure class state (`cds`)
```javascript
const {$1} = this.state;
const {
$1
} = this.state;
$0
```
### bind method to class (`cbnd`)
### bind method to class (`cbind`)
```javascript
this.$1 = this.$1.bind(this);
$0
```
### default props (`rdp`)
### default props (`cdp`)
```javascript
$1.defaultProps = {$2};
$1.defaultProps = {
$2
};
$0
```
### propType array (`pta`)
### propType required (`ptr`)
```javascript
PropTypes.array,$0
isRequired,

```
### propType array required (`ptar`)
### propType array (`pta`)
```javascript
PropTypes.array.isRequired,$0
PropTypes.array${2:,
}$0
```
### propType bool (`ptb`)
### propType array of (`ptao`)
```javascript
PropTypes.bool,$0
PropTypes.arrayOf($1)${2:,
}$0
```
### propType bool required (`ptbr`)
### propType bool (`ptb`)
```javascript
PropTypes.bool.isRequired,$0
PropTypes.bool,
$0
```
### propType func (`ptf`)
```javascript
PropTypes.func,$0
```
### propType func required (`ptfr`)
```javascript
PropTypes.func.isRequired,$0
```
### propType number (`ptn`)
```javascript
PropTypes.number,$0
PropTypes.func${1:,
}$0
```
### propType number required (`ptnr`)
### propType number (`ptnum`)
```javascript
PropTypes.number.isRequired,$0
PropTypes.number${1:,
}$0
```
### propType object (`pto`)
```javascript
PropTypes.object,$0
```
### propType object required (`ptor`)
```javascript
PropTypes.object.isRequired,$0
PropTypes.object${1:,
}$0
```
### propType string (`pts`)
```javascript
PropTypes.string,$0
```
### propTypes string required (`ptsr`)
```javascript
PropTypes.string.isRequired,$0
```
### propType node (`ptnd`)
```javascript
PropTypes.node,$0
PropTypes.string${1:,
}$0
```
### propType node required (`ptndr`)
### propType node (`ptn`)
```javascript
PropTypes.node.isRequired,$0
PropTypes.node${1:,
}$0
```
### propType element (`ptel`)
```javascript
PropTypes.element,$0
```
### propType element required (`ptelr`)
```javascript
PropTypes.element.isRequired,$0
PropTypes.element${1:,
}$0
```
### propType instanceOf (`pti`)
```javascript
PropTypes.instanceOf($1),$0
```
### propType instanceOf required (`ptir`)
```javascript
PropTypes.instanceOf($1).isRequired,$0
PropTypes.instanceOf($1)${2:,
}$0
```
### propType enum (`pte`)
```javascript
PropTypes.oneOf([$1]),$0
```
### propType enum required (`pter`)
```javascript
PropTypes.oneOf([$1]).isRequired,$0
PropTypes.oneOf([$1])${2:,
}$0
```
### propType one of type (`ptot`)
```javascript
PropTypes.oneOfType([$1]),$0
```
### propType one of type required (`ptotr`)
```javascript
PropTypes.oneOfType([$1]).isRequired,$0
```
### propType array of (`ptao`)
```javascript
PropTypes.arrayOf($1),$0
```
### propType array of required (`ptaor`)
```javascript
PropTypes.arrayOf($1).isRequired,$0
```
### propType object of (`ptoo`)
```javascript
PropTypes.objectOf($1),$0
```
### propType object of required (`ptoor`)
```javascript
PropTypes.objectOf($1).isRequired,$0
PropTypes.oneOfType([$1])${2:,
}$0
```
### propType shape (`ptsh`)
```javascript
PropTypes.shape({$0}),
```
### propType shape required (`ptshr`)
```javascript
PropTypes.shape({$1}).isRequired,$0
```
### higher order component (`hoc`)
```javascript
C => {
return class extends Component {
constructor(...rest) {
super(rest);
}

getChildContext() {
return {
};
}

render() {
$0return <C {...this.props} />;
}
};
}
PropTypes.shape({$1})${2:,
}${0}
```
### ref (`cref`)
```javascript
ref={(el) => {
this.$1 = el;
}}
const ${1:ref} = createRef();
$0
```

0 comments on commit 17a259f

Please sign in to comment.