Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Globals Code Snippet for VS Code
{
"New Component Boilerplate": {
"prefix": "component",
"body": [
"import React from 'react';",
"import PropTypes from 'prop-types';",
"import styles from './$1.module.$2css';",
"",
"export default function $1({ $2 }) {",
" return (",
" $0",
" );",
"}",
"",
"$1.propTypes = {",
$3,
"};",
"",
"$1.defaultProps = {",
$4,
"};",
],
},
"Connected Component Index File Boilerplate": {
"prefix": "connected",
"body": [
"import { connect } from 'react-redux';",
"import $1 from './$1';",
"",
"function mapStateToProps({ $2 }) {",
" return {",
" $3",
" };",
"}",
"",
"function mapDispatchToProps(dispatch) {",
" return { $4 };",
"}",
"",
"export default connect(mapStateToProps, mapDispatchToProps)($1);",
"",
],
},
"Redux Reducer Boilerplate": {
"prefix": "reducer",
"body": [
"",
"const DEFAULT_STATE = {};",
"",
"export default function reducer(state = DEFAULT_STATE, { type, payload }) {",
" switch(type) {",
" case $1: {",
" $0",
" }",
"",
" default: {",
" return state;",
" }",
" }",
"}",
"",
],
},
"Redux Action Boilerplate": {
"prefix": "action",
"body": [
"export const $1 = '$2';",
"export function $3($4) {",
" return {",
" type: $1,",
" payload: $0",
" };",
"}",
""
]
},
"Storybook Story Boilerplate": {
"prefix": "story",
"body": [
"import React from 'react';",
"import { storiesOf } from '@storybook/react';",
"import $1 from './$1';",
"",
"storiesOf('$1', module)",
" .addDecorator(story => <div style={{ margin: '2rem' }}>{story()}</div>)",
" .add('default', () => (",
" $2",
" ));",
"",
]
}
}
@dhruv-m-patel

This comment has been minimized.

Copy link
Owner Author

@dhruv-m-patel dhruv-m-patel commented Sep 24, 2020

Make sure to set snippet type to javascriptreact

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment