My VSCode snippets

typescript.json

{
	"Redux-toolkit slice": {
	  "prefix": "reduxSlice",
	  "body": [
		"import { createSlice } from '@reduxjs/toolkit'",
		"",
		"export type InitialState = {}",
		"",
		"const initialState: InitialState = {}",
		"",
		"export const ${1:name}Slice = createSlice({",
		"  name: '${1:name}',",
		"  initialState,",
		"  reducers: {},",
		"})",
		"",
		"export const {} = ${1:name}Slice.actions",
		"",
		"export default ${1:name}Slice.reducer",
		""
	  ],
	  "description": "Redux-toolkit slice"
	},
	"Redux-toolkit store": {
	  "prefix": "reduxStore",
	  "body": [
		"import { configureStore } from '@reduxjs/toolkit'",
		"import { useDispatch } from 'react-redux'",
		"",
		"export interface RootState {}",
		"",
		"const store = configureStore({",
		"  reducer: {},",
		"})",
		"",
		"export type AppDispatch = typeof store.dispatch",
		"export const useAppDispatch: () => AppDispatch = useDispatch // Export a hook that can be reused to resolve types",
		"",
		"export default store",
		""
	  ],
	  "description": "Redux-toolkit store"
	},
	"React Hook creation": {
	  "prefix": "reactHook",
	  "body": [
		"export interface ${1:hookName}Selectors {}",
		"",
		"export interface ${1:hookName}Actions {}",
		"",
		"export interface ${1:hookName}Hook {",
		"  selectors: ${1:hookName}Selectors",
		"  actions: ${1:hookName}Actions",
		"}",
		"",
		"export function use${1:hookName}(): ${1:hookName}Hook {",
		"  return {",
		"    selectors: {},",
		"    actions: {},",
		"  }",
		"}",
		""
	  ],
	  "description": "React Hook creation"
	},
	"React Hook test": {
	  "prefix": "reactHookTest",
	  "body": [
		"import { renderHook, act, RenderHookResult } from '@testing-library/react'",
		"",
		"import use${1:hookName} from '../use${1:hookName}'",
		"",
		"describe('use${1:hookName}', () => {",
		"  let result: RenderHookResult<",
		"    ReturnType<typeof use${1:hookName}>,",
		"    Parameters<typeof use${1:hookName}>",
		"  >",
		"",
		"  const renderUse${1:hookName} = () => {",
		"    result = renderHook(() => use${1:hookName}())",
		"  }",
		"",
		"  describe('selectors', () => {",
		"    describe('default', () => {",
		"      beforeAll(() => {",
		"        renderUse${1:hookName}()",
		"      })",
		"",
		"      it('should have selectors.PLACEHOLDER to be VALUE', () => {",
		"        expect(result.result.current.selectors.PLACEHOLDER).toBe(VALUE)",
		"      })",
		"    })",
		"  })",
		"})"
	  ],
	  "description": "React Hook test"
	}
}

typescriptreact.json

{
  "React Function Component": {
    "prefix": "reactComp",
    "body": [
      "import { ReactNode } from 'react'",
      "",
      "interface ${1:name}Props {",
      "  children: ReactNode",
      "}",
      "",
      "export const ${1:name} = ({ children }: ${1:name}Props) => {",
      "  return <div>{children}</div>",
      "}",
      ""
    ],
    "description": "React Function Component"
  },
  "React Native Component": {
    "prefix": "rnComp",
    "body": [
      "import { FunctionComponent, ReactNode } from 'react'",
      "import { StyleSheet, View, ViewStyle } from 'react-native'",
      "",
      "const componentStyles = StyleSheet.create({",
      "  container: {},",
      "})",
      "",
      "export interface Props {",
      "  style?: ViewStyle",
      "  children: ReactNode",
      "}",
      "",
      "const ${1:name}: FunctionComponent<Props> = ({ style = {}, children }) => (",
      "  <View style={{ ...componentStyles.container, ...style }}>{children}</View>",
      ")",
      "",
      "export default ${1:name}",
      ""
    ],
    "description": "React Native Component"
  },
  "React component testing": {
    "prefix": "reactCompTest",
    "body": [
      "import renderer from 'react-test-renderer'",
      "import { ThemeProvider } from 'styled-components'",
      "",
      "import { defaultTheme } from '../../../theme/Theme'",
      "",
      "import ${1:component} from '../${1:component}'",
      "",
      "describe('${1:component}', () => {",
      "  it('should renders correctly', () => {",
      "    const tree = renderer",
      "      .create(",
      "        <ThemeProvider theme={defaultTheme}>",
      "          <${1:component} />",
      "        </ThemeProvider>",
      "      )",
      "      .toJSON()",
      "",
      "    expect(tree).toMatchSnapshot()",
      "  })",
      "})",
      ""
    ],
    "description": "React component testing"
  },
  "Styled-component theme": {
    "prefix": "sth",
    "body": ["({ theme }: ThemeContainer) => theme.${1:prop}"],
    "description": "Styled-components theme function"
  },
  "Styled-component container": {
    "prefix": "scontainer",
    "body": [
      "import styled from 'styled-components'",
      "",
      "import { ThemeContainer } from '../../theme/Theme'",
      "",
      "const Container = styled.div`",
      "  background-color: ${({ theme }: ThemeContainer) => theme.};",
      "`"
    ],
    "description": "Styled-components container component"
  },
  "Create React context with hook": {
    "prefix": "reactCtx",
    "body": [
      "import { createContext, useContext, ReactNode } from 'react'",
      "",
      "interface ${1:name}ContextValues {}",
      "",
      "const ${1:name}Context = createContext({} as ${1:name}ContextValues)",
      "",
      "export const use${1:name}Context = () => {",
      "  const context = useContext(${1:name}Context)",
      "",
      "  if (context === undefined) {",
      "    throw new Error(\"use${1:name}Context must be used within ${1:name}Provider\")",
      "  }",
      "",
      "  return context",
      "}",
      "",
      "interface ${1:name}ProviderProps {",
      "  children: ReactNode",
      "}",
      "",
      "export const ${1:name}Provider = ({ children }: ${1:name}ProviderProps) => {",
      "  return (",
      "    <${1:name}Context.Provider",
      "      value={{",
      "        // values",
      "      }}",
      "    >",
      "      {children}",
      "    </${1:name}Context.Provider>",
      "  )",
      "}",
      ""
    ],
    "description": "Create React context with hook"
  },
  "React Native Component": {
    "prefix": "rnc",
    "body": [
      "import { ReactNode } from 'react'",
      "import { Text, View, StyleSheet, Animated } from 'react-native'",
      "",
      "interface ${1:name}Props {",
      "  children: ReactNode",
      "}",
      "",
      "const ${1:name} = ({ children }: ${1:name}Props) => {",
      "  return (",
      "    <>",
      "      {children}",
      "    </>",
      "  )",
      "}",
      "",
      "export default ${1:name}"
    ],
    "description": "React Native Component"
  }
}