Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
VS Code Snippets - React Typescript
{
"functionComponent": {
"prefix": "fc",
"body": [
"import React from 'react';",
"import styled from 'styled-components/macro';",
"",
"const Container = styled.div`",
" display: flex;",
" flex: 1;",
" background-color: white;",
" justify-content: center;",
" align-items: center;",
"`;",
"",
"const ${1} = () => {",
" return <Container>${1}</Container>;",
"}",
"",
"export default ${1};",
],
"description": "React functional component which is stateless"
},
"functionComponentWithProps": {
"prefix": "fcp",
"body": [
"import React from 'react';",
"import styled from 'styled-components/macro';",
"",
"interface Props {",
" myProp: string;",
" onClick: () => void;",
"}",
"",
"const Container = styled.div`",
" display: flex;",
" flex: 1;",
" background-color: white;",
" justify-content: center;",
" align-items: center;",
"`;",
"",
"const ${1} = ({myProp, onClick}:Props) => {",
" return <Container>${1}</Container>;",
"}",
"",
"export default ${1};",
],
"description": "React functional component with props"
},
"functionComponentWithHooks": {
"prefix": "fch",
"body": [
"import React, { useState } from 'react';",
"import styled from 'styled-components/macro';",
"",
"interface Props {",
" myProp: string;",
" onClick: () => void;",
"}",
"",
"const Container = styled.div`",
" display: flex;",
" flex: 1;",
" background-color: white;",
" justify-content: center;",
" align-items: center;",
"`;",
"",
"const ${1} = ({myProp, onClick}:Props) => {",
" const [count, setCount] = useState<number>(0);",
"",
" return <Container>${1}</Container>;",
"}",
"",
"export default ${1};",
],
"description": "React functional component with Hooks"
},
"integrationTest": {
"prefix": "it",
"body": [
"import React from 'react';"
"import { render, screen } from '@testing-library/react';"
"import ${1} from './${1}';"
"",
"test('should find text inside component', () => {",
" // Arrange",
" render(<${1} />);",
"",
" // Act",
" const element = screen.getByText('${1}');",
"",
" // Assert",
" expect(element).toBeTruthy();",
"});",
],
"description": "Integration Test using react-testing-library"
},
"integrationTestRouterRedux": {
"prefix": "itrr",
"body": [
"import React from 'react';"
"import { screen } from '@testing-library/react';"
"import ${1} from './${1}';"
"import { renderWithRouterRedux } from './utils/test-utils';"
"",
"test('should find text inside component', () => {",
" // Arrange",
" const { getByText } = renderWithRouterRedux(<${1} />, ['/INSERT_ROUTE_URL_HERE']);
"",
" // Act",
" const element = getByText('${1}');",
"",
" // Assert",
" expect(element).toBeTruthy();",
"});",
],
"description": "Integration test which includes a router and redux store"
},
// ==========================================================================================================================
// Javascript
"methodNoParms": {
"prefix": "met",
"body": "${1:methodName}() {\n\t${0}\n}",
"description": "Creates a method with no paramters inside a class in ES6 syntax"
},
"consoleLog": {
"prefix": "clg",
"body": "console.log('${1:object}');",
"description": "Displays an object in the console with its name"
},
"consoleLogObject": {
"prefix": "clo",
"body": "console.log('${1:object} :', ${1:object});",
"description": "Displays an object in the console with its name"
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment