React Code Clips

Description

This extension gives you JavaScript and TypeScript code clips for React, React Native, Redux and GraphQL.

Clips

Basic Methods

Trigger	Description
imp→	import moduleName from 'module'
imn→	import 'module'
imd→	import { destructuredModule } from 'module'
ime→	import * as alias from 'module'
ima→	import { originalName as aliasName} from 'module'
exp→	export default moduleName
exd→	export { destructuredModule } from 'module'
exa→	export { originalName as aliasName} from 'module'
enf→	export const functionName = (params) => { }
edf→	export default (params) => { }
met→	methodName = (params) => { }
fre→	arrayName.forEach(element => { }
fof→	for(let itemName of objectName { }
fin→	for(let itemName in objectName { }
anfn→	(params) => { }
nfn→	const functionName = (params) => { }
dob→	const {propName} = objectToDescruct
dar→	const [propName] = arrayToDescruct
sti→	setInterval(() => { }, intervalTime
sto→	setTimeout(() => { }, delayTime
prom→	return new Promise((resolve, reject) => { }

React

Trigger	Description
imr→	import React from 'react'
imrd→	import ReactDOM from 'react-dom/client'
croot→	import { createRoot } from 'react-dom/client'
imrc→	import React, { Component } from 'react'
imrcp→	import React, { Component } from 'react' & import PropTypes from 'prop-types'
imrpc→	import React, { PureComponent } from 'react'
imrpcp→	import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'
imrm→	import { memo } from 'react'
imrmp→	import { memo } from 'react' & import PropTypes from 'prop-types'
impt→	import PropTypes from 'prop-types'
imrr→	import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom'
imbr→	import { BrowserRouter as Router } from 'react-router-dom'
imbrc→	import { Routes, Route, NavLink, Link, Outlet } from 'react-router-dom'
imbrr→	import { Route } from 'react-router-dom'
imbrs→	import { Routes } from 'react-router-dom'
imbrl→	import { Link } from 'react-router-dom'
imbrnl→	import { NavLink } from 'react-router-dom'
imbro→	import { Outlet } from 'react-router-dom'
imbrna→	import { Navigate } from 'react-router-dom'
imrnav→	import { useNavigate } from 'react-router-dom'
imrpar→	import { useParams } from 'react-router-dom'
imrloc→	import { useLocation } from 'react-router-dom'
imrsp→	import { useSearchParams } from 'react-router-dom'
imrs→	import { useState } from 'react'
imrse→	import { useState, useEffect } from 'react'
redux→	import { connect } from 'react-redux'
rcontext→	const ${1:contextName} = createContext()
fref→	React.forwardRef((props, ref) => element)

React Native

Trigger	Description
imrn→	import { $1 } from 'react-native'
rnstyle→	const styles = StyleSheet.create({})

Redux

Trigger	Description
rxaction→	redux action template
rxconst→	export const $1 = '$1'
rxreducer→	redux reducer template
rxselect→	redux selector template
rxslice→	redux slice template

PropTypes

Trigger	Description
pta→	PropTypes.array
ptar→	PropTypes.array.isRequired
ptb→	PropTypes.bool
ptbr→	PropTypes.bool.isRequired
ptf→	PropTypes.func
ptfr→	PropTypes.func.isRequired
ptn→	PropTypes.number
ptnr→	PropTypes.number.isRequired
pto→	PropTypes.object
ptor→	PropTypes.object.isRequired
pts→	PropTypes.string
ptsr→	PropTypes.string.isRequired
ptnd→	PropTypes.node
ptndr→	PropTypes.node.isRequired
ptel→	PropTypes.element
ptelr→	PropTypes.element.isRequired
pti→	PropTypes.instanceOf(name)
ptir→	PropTypes.instanceOf(name).isRequired
pte→	PropTypes.oneOf([name])
pter→	PropTypes.oneOf([name]).isRequired
ptet→	PropTypes.oneOfType([name])
ptetr→	PropTypes.oneOfType([name]).isRequired
ptao→	PropTypes.arrayOf(name)
ptaor→	PropTypes.arrayOf(name).isRequired
ptoo→	PropTypes.objectOf(name)
ptoor→	PropTypes.objectOf(name).isRequired
ptsh→	PropTypes.shape({ })
ptshr→	PropTypes.shape({ }).isRequired
ptany→	PropTypes.any
ptypes→	static propTypes = {}

GraphQL

Uses @apollo/client hooks. Install with npm install @apollo/client graphql.

Trigger	Description
graphql→	import { useQuery, useMutation, gql } from '@apollo/client'
expgql→	useQuery(QUERY, { variables: { } })

Console

Trigger	Description
clg→	console.log(object)
clo→	console.log(`object`, object)
ctm→	console.time(`timeId`)
cte→	console.timeEnd(`timeId`)
cas→	console.assert(expression,object)
ccl→	console.clear()
cco→	console.count(label)
cdi→	console.dir
cer→	console.error(object)
cgr→	console.group(label)
cge→	console.groupEnd()
ctr→	console.trace(object)
cwa→	console.warn
cin→	console.info

React Components

rfcp

import PropTypes from 'prop-types'

function $1(props) {
  return <div>$0</div>
}

$1.propTypes = {}

export default $1

rfc

export default function $1() {
  return <div>$0</div>
}

rfce

function $1() {
  return <div>$0</div>
}

export default $1

rafcp

import PropTypes from 'prop-types'

const $1 = (props) => {
  return <div>$0</div>
}

$1.propTypes = {}

export default $1

rafc

export const $1 = () => {
  return <div>$0</div>
}

rafce

const $1 = () => {
  return <div>$0</div>
}

export default $1

rmc

import { memo } from 'react'

export default memo(function $1() {
  return <div>$0</div>
})

rmcp

import { memo } from 'react'
import PropTypes from 'prop-types'

const $1 = memo(function $1(props) {
  return <div>$0</div>
})

$1.propTypes = {}

export default $1

rfcredux

import { connect } from 'react-redux'

export const FileName = () => {
  return <div>$4</div>
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rfcreduxp

import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const FileName = () => {
  return <div>$4</div>
}

FileName.propTypes = {
  $2: $3,
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

reduxmap

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

reb

import { Component } from 'react'

class ErrorBoundary extends Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error) {
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    console.error(error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>
    }
    return this.props.children
  }
}

export default ErrorBoundary

rlazy

const Component = lazy(() => import('./Component'))

rsuspense

import { Suspense, lazy } from 'react'

const Component = lazy(() => import('./Component'))

export default function Parent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Component />
    </Suspense>
  )
}

React Native Components

rnf

import { View, Text } from 'react-native'

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

rnfs

import { StyleSheet, View, Text } from 'react-native'

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

const styles = StyleSheet.create({})

rnfe

import { View, Text } from 'react-native'

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

export default $1

rnfes

import { StyleSheet, View, Text } from 'react-native'

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

export default $1

const styles = StyleSheet.create({})

TypeScript variants of the above components can be accessed by using the ts prefix e.g. tsrfce

TanStack Query

Install with npm install @tanstack/react-query.

Trigger	Description
tqprovider→	QueryClientProvider app setup
imtq→	import { useQuery, useMutation, useQueryClient }
tqquery→	useQuery({ queryKey, queryFn })
tqmutation→	useMutation({ mutationFn, onSuccess })

tqprovider

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      children
    </QueryClientProvider>
  )
}

tqquery

const { data, isLoading, error } = useQuery({
  queryKey: ['key'],
  queryFn: fetchFn
})

tqmutation

const mutation = useMutation({
  mutationFn: mutateFn,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['key'] })
  }
})

SWR

Install with npm install swr.

Trigger	Description
imswr→	import useSWR from 'swr'
swr→	useSWR(key, fetcher)
swrf→	useSWR with inline async fetcher

swr

const { data, error, isLoading } = useSWR('key', fetcher)

swrf

const { data, error, isLoading } = useSWR(
  'key',
  async (url) => {
    const res = await fetch(url)
    return res.json()
  }
)

Other

cmmb

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

desc

describe('$1', () => {
  $2
})

test

test('should $1', () => {
  $2
})

tit

it('should $1', () => {
  $2
})

stest

import { render, screen } from '@testing-library/react'

import { ${1:ComponentName} } from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}

  test('render', () => {
    render(<${1:ComponentName} {...defaultProps} />)
    expect(screen.getByRole('$2')).toBeInTheDocument()
  })
})

srtest

import { render, screen } from '@testing-library/react'
import { Provider } from 'react-redux'

import store from 'src/store'
import { ${1:ComponentName} } from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}

  test('render', () => {
    render(
      <Provider store={store}>
        <${1:ComponentName} {...defaultProps} />
      </Provider>,
    )
    expect(screen.getByRole('$2')).toBeInTheDocument()
  })
})

sntest

import { render, screen } from '@testing-library/react-native'

import ${1:ComponentName} from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}

  test('render', () => {
    render(<${1:ComponentName} {...defaultProps} />)
    expect(screen.getByText('$2')).toBeTruthy()
  })
})

snrtest

import { render, screen } from '@testing-library/react-native'
import { Provider } from 'react-redux'

import store from 'src/store/configureStore'
import ${1:ComponentName} from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}

  test('render', () => {
    render(
      <Provider store={store}>
        <${1:ComponentName} {...defaultProps} />
      </Provider>,
    )
    expect(screen.getByText('$2')).toBeTruthy()
  })
})

hocredux

import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const mapStateToProps = state => ({

})

export const mapDispatchToProps = {

}

export const ${1:hocComponentName} = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {
  }

  return hocComponent
}

export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))

hoc

import PropTypes from 'prop-types'

export default (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {}

  return hocComponent
}

useId

const id = useId()

useSyncExternalStore

const snapshot = useSyncExternalStore(subscribe, getSnapshot)

useInsertionEffect

useInsertionEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

useHook (React 19 — use())

const value = use(resource)

useOptimistic

const [optimisticState, addOptimistic] = useOptimistic(state)

useActionState

const [state, formAction, isPending] = useActionState(action, initialState)

useFormStatus

const { pending, data, method, action } = useFormStatus()

useNavigate

const navigate = useNavigate()

useParams

const { param } = useParams()

useLocation

const location = useLocation()

useSearchParams

const [searchParams, setSearchParams] = useSearchParams()

useTransition

const [isPending, startTransition] = useTransition()

useDeferredValue

const deferredValue = useDeferredValue(value)

useState

const [state, setState] = useState(initialState)

useEffect

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

useContext

const context = useContext(contextValue)

useReducer

const [state, dispatch] = useReducer(reducer, initialState, init)

useCallback

const ${1:memoizedFn} = useCallback(
  () => {
    ${2:callback}
  },
  [${3:deps}],
)

useMemo

const ${1:memoizedValue} = useMemo(() => ${2:computeFn}, [${3:deps}])

useRef

const ref = useRef(initialValue)

useImperativeHandle

useImperativeHandle(
  ref,
  () => {
    handler
  },
  [input],
)

useDebugValue

useDebugValue(value)

useLayoutEffect

useLayoutEffect(() => {
  effect
  return () => {
    cleanup
  };
}, [input])

useSelector

const state = useSelector(state => state.state)

useDispatch

const dispatch = useDispatch()

Acknowledgements

React Code Clips is based on Damian Sznajder's VS Code extension

License

The MIT License (MIT)

Copyright (c) 2014, Nicolas Mercier

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Version 2.0.0

A major modernisation update bringing all clips in line with current React best practices.

Breaking Changes

• Removed all class component snippets (rcc, rce, rcep, rcp, rpcp, rpce, rccp, rcredux, rcreduxp) — use functional component equivalents instead
• Removed React Native class component snippets (rnc, rncs, rnce, rncredux) — use functional equivalents instead
• Removed TypeScript class component snippets (tsrcc, tsrce, tsrpc, tsrpce, tsrcredux)
• Removed class lifecycle method snippets (rconst, rconc, est, cdm, scu, cdup, cwun, gdsfp, gsbu, ren, sst, ssf, props, state, bnd, cref, cp, cs)
• Removed react-test-renderer from test scaffolds — replaced with @testing-library/react and @testing-library/react-native
• Updated imrd from react-dom to react-dom/client
• Updated GraphQL snippets from deprecated react-apollo to @apollo/client hooks

New Snippets

• croot — createRoot setup for React 18+
• reb — Error Boundary component (class still required by React)
• rlazy / rsuspense — React.lazy and Suspense code splitting
• useTransition / useDeferredValue — React 18 concurrent hooks
• useId / useSyncExternalStore / useInsertionEffect — React 18 hooks
• useHook (use()) / useOptimistic / useActionState / useFormStatus — React 19 hooks
• imbro / imbrna / imrnav / imrpar / imrloc / imrsp — React Router v6 imports
• useNavigate / useParams / useLocation / useSearchParams — React Router v6 hooks
• tqprovider / imtq / tqquery / tqmutation — TanStack Query (@tanstack/react-query)
• imswr / swr / swrf — SWR data fetching

Other Changes

• Removed import React from all functional component snippets (not needed since React 17 JSX transform)
• Updated all hook imports to use named imports without React, prefix
• Updated useDispatch to remove erroneous argument
• Updated useMemo and useCallback to use assignment pattern with proper tabstops
• Updated reduxSlice to use named tabstops
• Updated Router snippets to React Router v6 (Routes replaces Switch, Outlet, Navigate)
• Fixed rnfe which had a hardcoded filename

Version 1.0.2

Typo fix for 'rafce' clip name courtesy of @dlbnco

Version 1.0.1

Some minor fixes courtesy of @Pitchoune:

• Added 2 missing commands listed in readme
• Added missing existing commands in readme
• Fixed 'typeof' command (spelled tpyeof)

Version 1.0

Initial release