x1kk4 / sn1pp3ts

my react snippets

Just my VScode snippets

To see all the information about the project, visit the Docs

Installation:

git clone [email protected]:x1kk4/react-snippets.git snippets

cd snippets

Linux:

cp x1kk4-snippets.code-snippets ~/.config/Code/User/snippets/

In VSCode: ctrl + shift + P -> Snippets: Configure User Snippets -> choose x1kk4-snippets.code-snippets

MacOS:

cp x1kk4-snippets.code-snippets ~/Library/Application\ Support/Code/User/snippets/

In VSCode: cmd + shift + P -> Snippets: Configure User Snippets -> choose x1kk4-snippets.code-snippets

General:

Trigger	Output
log⇥	console
imp⇥	import
arr⇥	arrow func
efc⇥	export func component
edfc⇥	export default func component
edtfc⇥	ed typed func component
us⇥	useState
ue⇥	useEffect
t⇥	type
et⇥	export type
etf⇥	export type
<⇥	generic
cn⇥	className
cns⇥	className template string
nsc⇥	next server component
ncc⇥	next client component
ustyles⇥	useStyles (jss like styled system)

Examples:

---

log⇥

console.${1}(${2})

---

imp⇥

import ${1} from `${2}`

---

arr⇥

const ${1} = (${2}) => {${3}}

---

efc⇥

import { FC } from "react"

export const ${1}: FC = () => {
  return (
    <${2}>
      <p>${1}</p>
    </${2}>
  )
}

---

edfc⇥

import { FC } from "react"

const ${1}: FC = () => {
  return (
    <${2}>
      <p>${1}</p>
    </${2}>
  )
}

export default ${1}

---

edtfc⇥

import { FC } from "react"

interface ${1}Props {${3}}

const ${1}: FC<${1}Props> = ({${4}}) => {
  return (
    <${2}>
      <p>${1}</p>
    </${2}>
  )
}

export default ${1}

---

us⇥

const [${1}, set${1}] = useState<${2}>(${3})

---

ue⇥

useEffect(() => {
  ${2}
}, [${3}])

---

t⇥

type ${1} = {${2}}

---

et⇥

export type ${1} = {${2}}

---

etf⇥

export type {${2}} from '${1}'

---

<⇥

<${1}>

---

cn⇥

className={${1}}

---

cns⇥

className={`${${1}}`}

---

nsc⇥

const ${1} = async () => {
  return (
    <${2}>,
	  <p>${1}</p>
	</${2}>
  ),
},

export default ${1}

---

ncc⇥

'use client'

import { FC } from "react"

const ${1}: FC = () => {
  return (
    <${2}>
      <p>${1}</p>
    </${2}>
  )
}

export default ${1}

---

ustyles⇥

const useStyles = create${1}Styles(() => ({${2}}))

---