diff --git a/.DS_Store b/.DS_Store
index dd64616..091475c 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/README.md b/README.md
index 1f0ac72..b6554e6 100644
--- a/README.md
+++ b/README.md
@@ -73,6 +73,111 @@ We welcome contributions! If you have a suggestion for a new snippet or an impro
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
+
+
+
+
+Basic Imports
+
+imr: Import React
+imrc: Import React and Component
+imrd: Import ReactDOM
+imrs: Import React and useState
+imrse: Import React, useState, and useEffect
+impt: Import PropTypes
+impc: Import React and PureComponent
+
+Components
+
+cc: Class Component
+ffc: Function Component
+afc: Arrow Function Component
+rmc: React.memo Component
+tsrc: TypeScript React Component
+
+Hooks
+
+ush: useState Hook
+ueh: useEffect Hook
+uch: useContext Hook
+umh: useMemo Hook
+uch: useCallback Hook
+urh: useReducer Hook
+urefh: useRef Hook
+uih: useImperativeHandle Hook
+uleh: useLayoutEffect Hook
+
+Custom Hooks
+
+cuh: Custom Hook
+cuht: Custom Hook with TypeScript
+crht: Custom React Hook with TypeScript
+rceh: React Custom Event Hook
+
+Props and Types
+
+pt: PropTypes declaration
+dp: defaultProps declaration
+
+Styling
+
+sc: Styled component
+thp: Theme Provider
+
+State Management
+
+rac: Redux Action Creator
+rr: Redux Reducer
+cp: Context Provider
+rctx: React Context with TypeScript
+rca: Recoil Atom
+rcs: Recoil Selector
+
+Routing
+
+rrs: React Router Setup
+
+Testing
+
+rtl: React Testing Library Test
+
+Next.js
+
+nxp: Next.js Page
+
+React Native
+
+rnc: React Native Component
+
+Forms
+
+frm: Formik Form
+
+Error Handling
+
+eb: Error Boundary
+reb: React Error Boundary with Fallback UI
+
+Performance Optimization
+
+hoc: Higher-Order Component
+rfr: React.forwardRef
+
+Data Fetching
+
+gql: GraphQL Query
+rqh: React Query Hook
+apif: API Fetch
+
+Miscellaneous
+
+sbst: Storybook Story
+rpt: React Portal
+rlz: React.lazy with Suspense
+
+Use these prefixes in your code editor to quickly generate the corresponding React code snippets.
+
+
---
Happy coding! π»β¨ Don't forget to star this repo if you find it useful!
\ No newline at end of file
diff --git a/ReactSnipp-0.0.4.vsix b/ReactSnipp-0.0.4.vsix
new file mode 100644
index 0000000..98619cf
Binary files /dev/null and b/ReactSnipp-0.0.4.vsix differ
diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..fc24e7a
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-hacker
\ No newline at end of file
diff --git a/hello.jsx b/hello.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/old.me b/old.me
new file mode 100644
index 0000000..86593df
--- /dev/null
+++ b/old.me
@@ -0,0 +1,253 @@
+
+
+```
+sudo dnf showing-Aditya-Vijay card
+```
+
+```js
+const user = {
+ name: "Aditya Vijay",
+ age: "little more than the age of earth",
+ theme: [ "one dark", "github dark" ],
+ state: "oblivion",
+
+ line_endings: "crlf",
+ codeStyle: "Prettier",
+ variables: "camelCase",
+ trailing_comma: true,
+
+ hobbies: [ "programming", "chess", "gaming", "breathing", "hiding dead bodies", ],
+ languages: [ "C", "HTML", "JavaScript", "CSS", "flutter", "Java",],
+ editors: [ "Android Studio", "VS Code", "Sublime" ],
+
+ newLanguage: function () {
+ console.log("Namaste, World!")
+ },
+
+ hereIsYourGame: function (game) {
+ const good = [ "FPS", "Competitive", "AAA" ]
+ const acceptable = JSON.parse(fs.readFileSync("acceptablegames.json"))
+
+ if (good.includes(game)) {
+ console.log("Ready! Shoot! Win!")
+ } else {
+ console.log("No, thanks.")
+ }
+ },
+}
+```
+
+
+
+About Me
+
+
+
+
+Name: Aditya | Vijay
+
+Nationality: Indian
+
+
+Loves: Video & Photo Editing, Graphic Designing
+
+
+Gender: he/him/Male
+
+
+Hobbys: Breathing , Hiding Dead Bodies, Programming, Playing Dino Game On Chrome.
+
+
+Working @: Dustland Developer
+
+
+Mail: kiriotheo@gmail.com
+
+
+βIn C we had to code our own bugs. In C++ we can inherit them.β
+
+
+
+
+
+ 
+ 
+ 
+
+
+
+
+
+ Skills & Tools
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+ :computer: Main Tech Knowledge
+
+
+
+
+
+
+
+ \
+
+
+
+
+ \
+
+
+
+ \
+
+
+
+
+
+ \
+
+
+\
+
+
+
+
+ \
+
+
+
+ \
+
+
+
+ \
+
+
+
+
+
+
+
+
+
+
+
+ :brain: Others, Always Learning
+
+
+
+
+
+ \
+
+
+
+ \
+
+
+ \
+
+
+ \
+
+
+
+ \
+
+
+
+
+
+ \
+
+
+ \
+
+
+
+
+
+
+
+
+ :gear: GitHub Stats
+
+
+ 
+
+
+ 
+
+
+
+
+
+[](https://holopin.io/@kiriotheo)
diff --git a/package.json b/package.json
index d32838c..89a744c 100644
--- a/package.json
+++ b/package.json
@@ -1,27 +1,41 @@
{
"name": "ReactSnipp",
- "displayName": "React Snipp ~ Snippets you need.",
- "description": "Supercharge your React development with essential code snippets and utilities for a faster, smoother workflow.",
- "version": "0.0.3",
+ "displayName": "React Snipp ~ Essential React Snippets",
+ "description": "Supercharge your React development with 50+ essential code snippets for hooks, components, state management, and more. Boost productivity for React, React Native, and Next.js projects.",
+ "version": "0.0.4",
"icon": "images/logo.png",
"publisher": "adityavijay21",
"engines": {
"vscode": "^1.30.0"
},
"categories": [
- "Snippets"
+ "Snippets",
+ "Programming Languages"
],
"keywords": [
+ "react",
"react-native",
"javascript",
"typescript",
"snippets",
- "react-navigation",
+ "hooks",
+ "components",
"redux",
- "async-storage",
- "mobile-development",
+ "context-api",
+ "next-js",
+ "react-router",
+ "styled-components",
+ "formik",
+ "testing",
+ "graphql",
+ "recoil",
+ "react-query",
+ "performance",
+ "error-boundary",
+ "storybook",
"frontend",
- "ui"
+ "ui",
+ "productivity"
],
"contributes": {
"snippets": [
@@ -54,9 +68,8 @@
"url": "https://github.com/adityavijay21/reactsnipp.git"
},
"bugs": {
- "url": "https://github.com/adityavijay21/reactsnipp.git"
+ "url": "https://github.com/adityavijay21/reactsnipp/issues"
},
"homepage": "https://github.com/adityavijay21/reactsnipp#readme",
"license": "MIT"
- }
-
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/snippets/snippets.code-snippets b/snippets/snippets.code-snippets
index 386e0e5..fe0f60f 100644
--- a/snippets/snippets.code-snippets
+++ b/snippets/snippets.code-snippets
@@ -43,45 +43,6 @@
"export default ${1:ComponentName};"
]
},
- "Class Component With Constructor": {
- "prefix": "ccc",
- "body": [
- "class ${1:ComponentName} extends Component {",
- " constructor(props) {",
- " super(props);",
- " this.state = {",
- " $2",
- " };",
- " }",
- "",
- " render() {",
- " return (",
- " ",
- " $0",
- "
",
- " );",
- " }",
- "}",
- "",
- "export default ${1:ComponentName};"
- ]
- },
- "Class Pure Component": {
- "prefix": "cpc",
- "body": [
- "class ${1:ComponentName} extends PureComponent {",
- " render() {",
- " return (",
- " ",
- " $0",
- "
",
- " );",
- " }",
- "}",
- "",
- "export default ${1:ComponentName};"
- ]
- },
"Function Component": {
"prefix": "ffc",
"body": [
@@ -114,136 +75,701 @@
"export default ${1:ComponentName};"
]
},
- "useEffect Hook": {
- "prefix": "uef",
+ "React Hook useState": {
+ "prefix": "ush",
+ "body": [
+ "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialState});"
+ ]
+ },
+ "React Hook useEffect": {
+ "prefix": "ueh",
"body": [
"useEffect(() => {",
- " $1",
+ " ${1:effect}",
" return () => {",
- " $0",
+ " ${2:cleanup}",
" };",
- "}, []);"
+ "}, [${3:dependencies}]);"
]
},
- "useCallback Hook": {
- "prefix": "ucb",
+ "React Hook useContext": {
+ "prefix": "uch",
"body": [
- "const ${1:memoizedCallback} = useCallback(() => {",
- " $2",
- "}, [$0]);"
+ "const ${1:contextValue} = useContext(${2:MyContext});"
]
},
- "useMemo Hook": {
- "prefix": "ume",
+ "Custom Hook": {
+ "prefix": "cuh",
"body": [
- "const ${1:memoizedValue} = useMemo(() => {",
- " return $2;",
- "}, [$0]);"
+ "import { useState, useEffect } from 'react';",
+ "",
+ "function use${1:CustomHook}(${2:params}) {",
+ " const [${3:state}, set${3/(.*)/${1:/capitalize}/}] = useState(${4:initialState});",
+ "",
+ " useEffect(() => {",
+ " // Effect logic",
+ " $0",
+ " }, [${5:dependencies}]);",
+ "",
+ " return ${3:state};",
+ "}",
+ "",
+ "export default use${1:CustomHook};"
]
},
- "getDerivedStateFromProps": {
- "prefix": "gds",
+ "PropTypes": {
+ "prefix": "pt",
"body": [
- "static getDerivedStateFromProps(nextProps, prevState) {",
- " $0",
- " return null;",
- "}"
+ "${1:ComponentName}.propTypes = {",
+ " ${2:prop}: PropTypes.${3:type},",
+ "};"
]
},
- "shouldComponentUpdate": {
- "prefix": "scu",
+ "Default Props": {
+ "prefix": "dp",
"body": [
- "shouldComponentUpdate(nextProps, nextState) {",
- " $0",
- " return true;",
- "}"
+ "${1:ComponentName}.defaultProps = {",
+ " ${2:prop}: ${3:defaultValue},",
+ "};"
]
},
- "componentDidUpdate": {
- "prefix": "cdu",
+ "Styled Component": {
+ "prefix": "sc",
"body": [
- "componentDidUpdate(prevProps, prevState) {",
- " $0",
- "}"
+ "import styled from 'styled-components';",
+ "",
+ "const ${1:StyledComponent} = styled.${2:div}`",
+ " ${3:css}",
+ "`;",
+ "",
+ "export default ${1:StyledComponent};"
]
},
- "componentWillUnmount": {
- "prefix": "cwun",
+ "Redux Action Creator": {
+ "prefix": "rac",
"body": [
- "componentWillUnmount() {",
- " $0",
- "}"
+ "export const ${1:actionName} = (${2:payload}) => ({",
+ " type: ${3:ACTION_TYPE},",
+ " payload: ${2:payload},",
+ "});"
]
},
- "componentDidCatch": {
- "prefix": "cdc",
+ "Redux Reducer": {
+ "prefix": "rr",
"body": [
- "componentDidCatch(error, info) {",
- " $0",
+ "const initialState = {",
+ " ${1:property}: ${2:value},",
+ "};",
+ "",
+ "export default function ${3:reducerName}(state = initialState, action) {",
+ " switch (action.type) {",
+ " case ${4:ACTION_TYPE}:",
+ " return {",
+ " ...state,",
+ " ${5:property}: action.payload,",
+ " };",
+ " default:",
+ " return state;",
+ " }",
"}"
]
},
- "getSnapshotBeforeUpdate": {
- "prefix": "gsbu",
+ "Context Provider": {
+ "prefix": "cp",
"body": [
- "getSnapshotBeforeUpdate(prevProps, prevState) {",
- " $0",
- " return null;",
- "}"
+ "import React, { createContext, useState } from 'react';",
+ "",
+ "export const ${1:MyContext} = createContext();",
+ "",
+ "export const ${1:MyContext}Provider = ({ children }) => {",
+ " const [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState(${3:initialState});",
+ "",
+ " return (",
+ " <${1:MyContext}.Provider value={{ ${2:state}, set${2/(.*)/${1:/capitalize}/} }}>",
+ " {children}",
+ " ",
+ " );",
+ "};"
]
},
- "setState": {
- "prefix": "ss",
+ "React Router Setup": {
+ "prefix": "rrs",
"body": [
- "this.setState((prevState, props) => ({",
- " $0",
- "}));"
+ "import React from 'react';",
+ "import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';",
+ "",
+ "const App = () => {",
+ " return (",
+ " ",
+ " ",
+ " ",
+ " ",
+ " ",
+ " ",
+ " );",
+ "};",
+ "",
+ "export default App;"
]
},
- "Declare a new state variable using State Hook": {
- "prefix": "usf",
+ "React Testing Library Test": {
+ "prefix": "rtl",
"body": [
- "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($2);"
+ "import React from 'react';",
+ "import { render, screen } from '@testing-library/react';",
+ "import ${1:ComponentName} from './${1:ComponentName}';",
+ "",
+ "test('renders ${1:ComponentName}', () => {",
+ " render(<${1:ComponentName} />);",
+ " const element = screen.getByText(/${2:text}/i);",
+ " expect(element).toBeInTheDocument();",
+ "});"
]
},
- "Render Prop": {
- "prefix": "rprop",
+ "Next.js Page": {
+ "prefix": "nxp",
"body": [
- "${1:renderProp}={({ ${2:prop} }) => (",
- " $0",
- ")}"
+ "import React from 'react';",
+ "",
+ "const ${1:PageName} = () => {",
+ " return (",
+ " ",
+ "
${1:PageName}
",
+ " $0",
+ " ",
+ " );",
+ "};",
+ "",
+ "export default ${1:PageName};"
]
},
- "Higher Order Component": {
+ "React Native Component": {
+ "prefix": "rnc",
+ "body": [
+ "import React from 'react';",
+ "import { View, Text, StyleSheet } from 'react-native';",
+ "",
+ "const ${1:ComponentName} = () => {",
+ " return (",
+ " ",
+ " ${1:ComponentName}",
+ " ",
+ " );",
+ "};",
+ "",
+ "const styles = StyleSheet.create({",
+ " container: {",
+ " flex: 1,",
+ " justifyContent: 'center',",
+ " alignItems: 'center',",
+ " },",
+ "});",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Formik Form": {
+ "prefix": "frm",
+ "body": [
+ "import React from 'react';",
+ "import { Formik, Form, Field } from 'formik';",
+ "",
+ "const ${1:FormName} = () => (",
+ " {",
+ " console.log(values);",
+ " actions.setSubmitting(false);",
+ " }}",
+ " >",
+ " {({ isSubmitting }) => (",
+ " ",
+ " )}",
+ " ",
+ ");"
+ ]
+ },
+ "Error Boundary": {
+ "prefix": "eb",
+ "body": [
+ "import React, { 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.log(error, errorInfo);",
+ " }",
+ "",
+ " render() {",
+ " if (this.state.hasError) {",
+ " return Something went wrong.
;",
+ " }",
+ "",
+ " return this.props.children;",
+ " }",
+ "}",
+ "",
+ "export default ErrorBoundary;"
+ ]
+ },
+ "Higher-Order Component": {
"prefix": "hoc",
"body": [
"import React from 'react';",
"",
- "const ${1:withSomething} = (WrappedComponent) => {",
+ "const with${1:HOCName} = (WrappedComponent) => {",
" return class extends React.Component {",
" render() {",
- " return ;",
+ " return ;",
" }",
" };",
"};",
"",
- "export default ${1:withSomething};"
+ "export default with${1:HOCName};"
]
},
- "Context Provider": {
- "prefix": "cp",
+ "useMemo Hook": {
+ "prefix": "umh",
+ "body": [
+ "const memoizedValue = useMemo(() => computeExpensiveValue(${1:a}, ${2:b}), [${1:a}, ${2:b}]);"
+ ]
+ },
+ "useCallback Hook": {
+ "prefix": "uch",
+ "body": [
+ "const memoizedCallback = useCallback(",
+ " () => {",
+ " doSomething(${1:a}, ${2:b});",
+ " },",
+ " [${1:a}, ${2:b}],",
+ ");"
+ ]
+ },
+ "TypeScript React Component": {
+ "prefix": "tsrc",
+ "body": [
+ "import React from 'react';",
+ "",
+ "interface ${1:ComponentName}Props {",
+ " ${2:prop}: ${3:type};",
+ "}",
+ "",
+ "const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({ ${2:prop} }) => {",
+ " return (",
+ " ",
+ " ${4:content}",
+ "
",
+ " );",
+ "};",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "GraphQL Query": {
+ "prefix": "gql",
+ "body": [
+ "import { gql, useQuery } from '@apollo/client';",
+ "",
+ "const GET_${1:DATA} = gql`",
+ " query Get${1:Data} {",
+ " ${2:queryName} {",
+ " ${3:field}",
+ " }",
+ " }",
+ "`;",
+ "",
+ "const { loading, error, data } = useQuery(GET_${1:DATA});"
+ ]
+ },
+ "Storybook Story": {
+ "prefix": "sbst",
"body": [
- "<${1:Context}.Provider value={${2:value}}>",
- " ${0}",
- ""
+ "import React from 'react';",
+ "import { Story, Meta } from '@storybook/react';",
+ "",
+ "import { ${1:ComponentName}, ${1:ComponentName}Props } from './${1:ComponentName}';",
+ "",
+ "export default {",
+ " title: 'Components/${1:ComponentName}',",
+ " component: ${1:ComponentName},",
+ "} as Meta;",
+ "",
+ "const Template: Story<${1:ComponentName}Props> = (args) => <${1:ComponentName} {...args} />;",
+ "",
+ "export const Default = Template.bind({});",
+ "Default.args = {",
+ " ${2:prop}: ${3:value},",
+ "};"
]
},
- "Class Property Function": {
- "prefix": "cpf",
+ "API Fetch": {
+ "prefix": "apif",
"body": [
- "${1:propertyName} = (${2:params}) => {",
- " $0",
+ "const fetchData = async () => {",
+ " try {",
+ " const response = await fetch('${1:url}');",
+ " const data = await response.json();",
+ " console.log(data);",
+ " } catch (error) {",
+ " console.error('Error:', error);",
+ " }",
"};"
]
- }
+ },
+ "Theme Provider": {
+ "prefix": "thp",
+ "body": [
+ "import React from 'react';",
+ "import { ThemeProvider } from 'styled-components';",
+ "",
+ "const theme = {",
+ " colors: {",
+ " primary: '${1:#007bff}',",
+ " secondary: '${2:#6c757d}',",
+ " },",
+ "};",
+ "",
+ "const ThemedApp = () => (",
+ " ",
+ " ",
+ " ",
+ ");"
+ ]
+ },
+ "React.memo Component": {
+ "prefix": "rmc",
+ "body": [
+ "import React from 'react';",
+ "",
+ "const ${1:ComponentName} = React.memo(({ ${2:props} }) => {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ "});",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "useReducer Hook": {
+ "prefix": "urh",
+ "body": [
+ "const [state, dispatch] = useReducer((state, action) => {",
+ " switch (action.type) {",
+ " case '${1:ACTION_TYPE}':",
+ " return {...state, ${2:property}: action.payload};",
+ " default:",
+ " return state;",
+ " }",
+ "}, {",
+ " ${3:initialState}",
+ "});"
+ ]
+ },
+ "useRef Hook": {
+ "prefix": "urefh",
+ "body": [
+ "const ${1:refName} = useRef(${2:initialValue});"
+ ]
+ },
+ "useMemo with TypeScript": {
+ "prefix": "umht",
+ "body": [
+ "const ${1:memoizedValue} = useMemo<${2:ReturnType}>(() => {",
+ " return ${3:computeExpensiveValue}(${4:a}, ${5:b});",
+ "}, [${4:a}, ${5:b}]);"
+ ]
+ },
+ "Custom Hook with TypeScript": {
+ "prefix": "cuht",
+ "body": [
+ "import { useState, useEffect } from 'react';",
+ "",
+ "interface ${1:HookName}Props {",
+ " ${2:prop}: ${3:type};",
+ "}",
+ "",
+ "interface ${1:HookName}Result {",
+ " ${4:resultProp}: ${5:resultType};",
+ "}",
+ "",
+ "const use${1:HookName} = ({ ${2:prop} }: ${1:HookName}Props): ${1:HookName}Result => {",
+ " const [${4:resultProp}, set${4/(.*)/${1:/capitalize}/}] = useState<${5:resultType}>(${6:initialValue});",
+ "",
+ " useEffect(() => {",
+ " // Effect logic",
+ " $0",
+ " }, [${2:prop}]);",
+ "",
+ " return { ${4:resultProp} };",
+ "}",
+ "",
+ "export default use${1:HookName};"
+ ]
+ },
+ "React Portal": {
+ "prefix": "rpt",
+ "body": [
+ "import ReactDOM from 'react-dom';",
+ "",
+ "const ${1:PortalComponent} = ({ children }) => {",
+ " const el = document.getElementById('${2:portal-root}');",
+ " return el ? ReactDOM.createPortal(children, el) : null;",
+ "};"
+ ]
+ },
+ "React.lazy with Suspense": {
+ "prefix": "rlz",
+ "body": [
+ "import React, { Suspense } from 'react';",
+ "",
+ "const ${1:LazyComponent} = React.lazy(() => import('./${1:LazyComponent}'));",
+ "",
+ "const ${2:ParentComponent} = () => (",
+ " Loading...}>",
+ " <${1:LazyComponent} />",
+ " ",
+ ");"
+ ]
+ },
+ "useImperativeHandle Hook": {
+ "prefix": "uih",
+ "body": [
+ "useImperativeHandle(ref, () => ({",
+ " ${1:exposedMethod}: () => {",
+ " $0",
+ " }",
+ "}));"
+ ]
+ },
+ "React Component with PropTypes": {
+ "prefix": "rcpt",
+ "body": [
+ "import React from 'react';",
+ "import PropTypes from 'prop-types';",
+ "",
+ "const ${1:ComponentName} = ({ ${2:prop} }) => {",
+ " return (",
+ " ",
+ " {${2:prop}}",
+ "
",
+ " );",
+ "};",
+ "",
+ "${1:ComponentName}.propTypes = {",
+ " ${2:prop}: PropTypes.${3:type}.isRequired,",
+ "};",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "useLayoutEffect Hook": {
+ "prefix": "uleh",
+ "body": [
+ "useLayoutEffect(() => {",
+ " // Synchronous side effect",
+ " $0",
+ " return () => {",
+ " // Clean up",
+ " };",
+ "}, [${1:dependencies}]);"
+ ]
+ },
+ "React.forwardRef": {
+ "prefix": "rfr",
+ "body": [
+ "import React from 'react';",
+ "",
+ "const ${1:ComponentName} = React.forwardRef((props, ref) => {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ "});",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Custom React Hook with Typescript": {
+ "prefix": "crht",
+ "body": [
+ "import { useState, useEffect } from 'react';",
+ "",
+ "type ${1:HookName}Props = {",
+ " ${2:prop}: ${3:type};",
+ "};",
+ "",
+ "type ${1:HookName}Result = {",
+ " ${4:resultProp}: ${5:resultType};",
+ "};",
+ "",
+ "export const use${1:HookName} = ({ ${2:prop} }: ${1:HookName}Props): ${1:HookName}Result => {",
+ " const [${4:resultProp}, set${4/(.*)/${1:/capitalize}/}] = useState<${5:resultType}>(${6:initialValue});",
+ "",
+ " useEffect(() => {",
+ " // Effect logic",
+ " $0",
+ " }, [${2:prop}]);",
+ "",
+ " return { ${4:resultProp} };",
+ "};"
+ ]
+ },
+ "React Context with TypeScript": {
+ "prefix": "rctx",
+ "body": [
+ "import React, { createContext, useContext, useState } from 'react';",
+ "",
+ "type ${1:ContextName}Type = {",
+ " ${2:stateName}: ${3:StateType};",
+ " ${4:setterName}: React.Dispatch>;",
+ "};",
+ "",
+ "const ${1:ContextName}Context = createContext<${1:ContextName}Type | undefined>(undefined);",
+ "",
+ "export const ${1:ContextName}Provider: React.FC = ({ children }) => {",
+ " const [${2:stateName}, ${4:setterName}] = useState<${3:StateType}>(${5:initialState});",
+ "",
+ " return (",
+ " <${1:ContextName}Context.Provider value={{ ${2:stateName}, ${4:setterName} }}>",
+ " {children}",
+ " ",
+ " );",
+ "};",
+ "",
+ "export const use${1:ContextName} = (): ${1:ContextName}Type => {",
+ " const context = useContext(${1:ContextName}Context);",
+ " if (context === undefined) {",
+ " throw new Error('use${1:ContextName} must be used within a ${1:ContextName}Provider');",
+ " }",
+ " return context;",
+ "};"
+ ]
+ },
+ "React Query Hook": {
+ "prefix": "rqh",
+ "body": [
+ "import { useQuery } from 'react-query';",
+ "",
+ "const fetch${1:Data} = async () => {",
+ " const response = await fetch('${2:apiUrl}');",
+ " if (!response.ok) {",
+ " throw new Error('Network response was not ok');",
+ " }",
+ " return response.json();",
+ "};",
+ "",
+ "export const use${1:Data} = () => {",
+ " return useQuery('${3:queryKey}', fetch${1:Data}, {",
+ " staleTime: ${4:staleTime},",
+ " cacheTime: ${5:cacheTime},",
+ " });",
+ "};"
+ ]
+ },
+ "Recoil Atom": {
+ "prefix": "rca",
+ "body": [
+ "import { atom } from 'recoil';",
+ "",
+ "export const ${1:atomName}State = atom({",
+ " key: '${1:atomName}',",
+ " default: ${2:defaultValue},",
+ "});"
+ ]
+ },
+ "Recoil Selector": {
+ "prefix": "rcs",
+ "body": [
+ "import { selector } from 'recoil';",
+ "import { ${1:dependencyAtom} } from './atoms';",
+ "",
+ "export const ${2:selectorName} = selector({",
+ " key: '${2:selectorName}',",
+ " get: ({ get }) => {",
+ " const value = get(${1:dependencyAtom});",
+ " return ${3:computedValue};",
+ " },",
+ "});"
+ ]
+ },
+ "React Error Boundary with Fallback UI": {
+ "prefix": "reb",
+ "body": [
+ "import React, { Component, ErrorInfo, ReactNode } from 'react';",
+ "",
+ "interface ErrorBoundaryProps {",
+ " children: ReactNode;",
+ " fallback: ReactNode;",
+ "}",
+ "",
+ "interface ErrorBoundaryState {",
+ " hasError: boolean;",
+ "}",
+ "",
+ "class ErrorBoundary extends Component {",
+ " constructor(props: ErrorBoundaryProps) {",
+ " super(props);",
+ " this.state = { hasError: false };",
+ " }",
+ "",
+ " static getDerivedStateFromError(_: Error): ErrorBoundaryState {",
+ " return { hasError: true };",
+ " }",
+ "",
+ " componentDidCatch(error: Error, errorInfo: ErrorInfo) {",
+ " console.error('ErrorBoundary caught an error:', error, errorInfo);",
+ " }",
+ "",
+ " render() {",
+ " if (this.state.hasError) {",
+ " return this.props.fallback;",
+ " }",
+ "",
+ " return this.props.children;",
+ " }",
+ "}",
+ "",
+ "export default ErrorBoundary;"
+ ]
+ },
+ "React Custom Event Hook": {
+ "prefix": "rceh",
+ "body": [
+ "import { useEffect, useRef } from 'react';",
+ "",
+ "export function use${1:EventName}(handler: (event: ${2:EventType}) => void) {",
+ " const savedHandler = useRef<(event: ${2:EventType}) => void>();",
+ "",
+ " useEffect(() => {",
+ " savedHandler.current = handler;",
+ " }, [handler]);",
+ "",
+ " useEffect(() => {",
+ " const eventListener = (event: ${2:EventType}) => savedHandler.current?.(event);",
+ " window.addEventListener('${3:eventName}', eventListener);",
+ " return () => {",
+ " window.removeEventListener('${3:eventName}', eventListener);",
+ " };",
+ " }, []);",
+ "}"
+ ]
+ }
+
+
}
\ No newline at end of file
diff --git a/snippets/types/React.json b/snippets/types/React.json
index 386e0e5..fe0f60f 100644
--- a/snippets/types/React.json
+++ b/snippets/types/React.json
@@ -43,45 +43,6 @@
"export default ${1:ComponentName};"
]
},
- "Class Component With Constructor": {
- "prefix": "ccc",
- "body": [
- "class ${1:ComponentName} extends Component {",
- " constructor(props) {",
- " super(props);",
- " this.state = {",
- " $2",
- " };",
- " }",
- "",
- " render() {",
- " return (",
- " ",
- " $0",
- "
",
- " );",
- " }",
- "}",
- "",
- "export default ${1:ComponentName};"
- ]
- },
- "Class Pure Component": {
- "prefix": "cpc",
- "body": [
- "class ${1:ComponentName} extends PureComponent {",
- " render() {",
- " return (",
- " ",
- " $0",
- "
",
- " );",
- " }",
- "}",
- "",
- "export default ${1:ComponentName};"
- ]
- },
"Function Component": {
"prefix": "ffc",
"body": [
@@ -114,136 +75,701 @@
"export default ${1:ComponentName};"
]
},
- "useEffect Hook": {
- "prefix": "uef",
+ "React Hook useState": {
+ "prefix": "ush",
+ "body": [
+ "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialState});"
+ ]
+ },
+ "React Hook useEffect": {
+ "prefix": "ueh",
"body": [
"useEffect(() => {",
- " $1",
+ " ${1:effect}",
" return () => {",
- " $0",
+ " ${2:cleanup}",
" };",
- "}, []);"
+ "}, [${3:dependencies}]);"
]
},
- "useCallback Hook": {
- "prefix": "ucb",
+ "React Hook useContext": {
+ "prefix": "uch",
"body": [
- "const ${1:memoizedCallback} = useCallback(() => {",
- " $2",
- "}, [$0]);"
+ "const ${1:contextValue} = useContext(${2:MyContext});"
]
},
- "useMemo Hook": {
- "prefix": "ume",
+ "Custom Hook": {
+ "prefix": "cuh",
"body": [
- "const ${1:memoizedValue} = useMemo(() => {",
- " return $2;",
- "}, [$0]);"
+ "import { useState, useEffect } from 'react';",
+ "",
+ "function use${1:CustomHook}(${2:params}) {",
+ " const [${3:state}, set${3/(.*)/${1:/capitalize}/}] = useState(${4:initialState});",
+ "",
+ " useEffect(() => {",
+ " // Effect logic",
+ " $0",
+ " }, [${5:dependencies}]);",
+ "",
+ " return ${3:state};",
+ "}",
+ "",
+ "export default use${1:CustomHook};"
]
},
- "getDerivedStateFromProps": {
- "prefix": "gds",
+ "PropTypes": {
+ "prefix": "pt",
"body": [
- "static getDerivedStateFromProps(nextProps, prevState) {",
- " $0",
- " return null;",
- "}"
+ "${1:ComponentName}.propTypes = {",
+ " ${2:prop}: PropTypes.${3:type},",
+ "};"
]
},
- "shouldComponentUpdate": {
- "prefix": "scu",
+ "Default Props": {
+ "prefix": "dp",
"body": [
- "shouldComponentUpdate(nextProps, nextState) {",
- " $0",
- " return true;",
- "}"
+ "${1:ComponentName}.defaultProps = {",
+ " ${2:prop}: ${3:defaultValue},",
+ "};"
]
},
- "componentDidUpdate": {
- "prefix": "cdu",
+ "Styled Component": {
+ "prefix": "sc",
"body": [
- "componentDidUpdate(prevProps, prevState) {",
- " $0",
- "}"
+ "import styled from 'styled-components';",
+ "",
+ "const ${1:StyledComponent} = styled.${2:div}`",
+ " ${3:css}",
+ "`;",
+ "",
+ "export default ${1:StyledComponent};"
]
},
- "componentWillUnmount": {
- "prefix": "cwun",
+ "Redux Action Creator": {
+ "prefix": "rac",
"body": [
- "componentWillUnmount() {",
- " $0",
- "}"
+ "export const ${1:actionName} = (${2:payload}) => ({",
+ " type: ${3:ACTION_TYPE},",
+ " payload: ${2:payload},",
+ "});"
]
},
- "componentDidCatch": {
- "prefix": "cdc",
+ "Redux Reducer": {
+ "prefix": "rr",
"body": [
- "componentDidCatch(error, info) {",
- " $0",
+ "const initialState = {",
+ " ${1:property}: ${2:value},",
+ "};",
+ "",
+ "export default function ${3:reducerName}(state = initialState, action) {",
+ " switch (action.type) {",
+ " case ${4:ACTION_TYPE}:",
+ " return {",
+ " ...state,",
+ " ${5:property}: action.payload,",
+ " };",
+ " default:",
+ " return state;",
+ " }",
"}"
]
},
- "getSnapshotBeforeUpdate": {
- "prefix": "gsbu",
+ "Context Provider": {
+ "prefix": "cp",
"body": [
- "getSnapshotBeforeUpdate(prevProps, prevState) {",
- " $0",
- " return null;",
- "}"
+ "import React, { createContext, useState } from 'react';",
+ "",
+ "export const ${1:MyContext} = createContext();",
+ "",
+ "export const ${1:MyContext}Provider = ({ children }) => {",
+ " const [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState(${3:initialState});",
+ "",
+ " return (",
+ " <${1:MyContext}.Provider value={{ ${2:state}, set${2/(.*)/${1:/capitalize}/} }}>",
+ " {children}",
+ " ",
+ " );",
+ "};"
]
},
- "setState": {
- "prefix": "ss",
+ "React Router Setup": {
+ "prefix": "rrs",
"body": [
- "this.setState((prevState, props) => ({",
- " $0",
- "}));"
+ "import React from 'react';",
+ "import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';",
+ "",
+ "const App = () => {",
+ " return (",
+ " ",
+ " ",
+ " ",
+ " ",
+ " ",
+ " ",
+ " );",
+ "};",
+ "",
+ "export default App;"
]
},
- "Declare a new state variable using State Hook": {
- "prefix": "usf",
+ "React Testing Library Test": {
+ "prefix": "rtl",
"body": [
- "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($2);"
+ "import React from 'react';",
+ "import { render, screen } from '@testing-library/react';",
+ "import ${1:ComponentName} from './${1:ComponentName}';",
+ "",
+ "test('renders ${1:ComponentName}', () => {",
+ " render(<${1:ComponentName} />);",
+ " const element = screen.getByText(/${2:text}/i);",
+ " expect(element).toBeInTheDocument();",
+ "});"
]
},
- "Render Prop": {
- "prefix": "rprop",
+ "Next.js Page": {
+ "prefix": "nxp",
"body": [
- "${1:renderProp}={({ ${2:prop} }) => (",
- " $0",
- ")}"
+ "import React from 'react';",
+ "",
+ "const ${1:PageName} = () => {",
+ " return (",
+ " ",
+ "
${1:PageName}
",
+ " $0",
+ " ",
+ " );",
+ "};",
+ "",
+ "export default ${1:PageName};"
]
},
- "Higher Order Component": {
+ "React Native Component": {
+ "prefix": "rnc",
+ "body": [
+ "import React from 'react';",
+ "import { View, Text, StyleSheet } from 'react-native';",
+ "",
+ "const ${1:ComponentName} = () => {",
+ " return (",
+ " ",
+ " ${1:ComponentName}",
+ " ",
+ " );",
+ "};",
+ "",
+ "const styles = StyleSheet.create({",
+ " container: {",
+ " flex: 1,",
+ " justifyContent: 'center',",
+ " alignItems: 'center',",
+ " },",
+ "});",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Formik Form": {
+ "prefix": "frm",
+ "body": [
+ "import React from 'react';",
+ "import { Formik, Form, Field } from 'formik';",
+ "",
+ "const ${1:FormName} = () => (",
+ " {",
+ " console.log(values);",
+ " actions.setSubmitting(false);",
+ " }}",
+ " >",
+ " {({ isSubmitting }) => (",
+ " ",
+ " )}",
+ " ",
+ ");"
+ ]
+ },
+ "Error Boundary": {
+ "prefix": "eb",
+ "body": [
+ "import React, { 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.log(error, errorInfo);",
+ " }",
+ "",
+ " render() {",
+ " if (this.state.hasError) {",
+ " return Something went wrong.
;",
+ " }",
+ "",
+ " return this.props.children;",
+ " }",
+ "}",
+ "",
+ "export default ErrorBoundary;"
+ ]
+ },
+ "Higher-Order Component": {
"prefix": "hoc",
"body": [
"import React from 'react';",
"",
- "const ${1:withSomething} = (WrappedComponent) => {",
+ "const with${1:HOCName} = (WrappedComponent) => {",
" return class extends React.Component {",
" render() {",
- " return ;",
+ " return ;",
" }",
" };",
"};",
"",
- "export default ${1:withSomething};"
+ "export default with${1:HOCName};"
]
},
- "Context Provider": {
- "prefix": "cp",
+ "useMemo Hook": {
+ "prefix": "umh",
+ "body": [
+ "const memoizedValue = useMemo(() => computeExpensiveValue(${1:a}, ${2:b}), [${1:a}, ${2:b}]);"
+ ]
+ },
+ "useCallback Hook": {
+ "prefix": "uch",
+ "body": [
+ "const memoizedCallback = useCallback(",
+ " () => {",
+ " doSomething(${1:a}, ${2:b});",
+ " },",
+ " [${1:a}, ${2:b}],",
+ ");"
+ ]
+ },
+ "TypeScript React Component": {
+ "prefix": "tsrc",
+ "body": [
+ "import React from 'react';",
+ "",
+ "interface ${1:ComponentName}Props {",
+ " ${2:prop}: ${3:type};",
+ "}",
+ "",
+ "const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({ ${2:prop} }) => {",
+ " return (",
+ " ",
+ " ${4:content}",
+ "
",
+ " );",
+ "};",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "GraphQL Query": {
+ "prefix": "gql",
+ "body": [
+ "import { gql, useQuery } from '@apollo/client';",
+ "",
+ "const GET_${1:DATA} = gql`",
+ " query Get${1:Data} {",
+ " ${2:queryName} {",
+ " ${3:field}",
+ " }",
+ " }",
+ "`;",
+ "",
+ "const { loading, error, data } = useQuery(GET_${1:DATA});"
+ ]
+ },
+ "Storybook Story": {
+ "prefix": "sbst",
"body": [
- "<${1:Context}.Provider value={${2:value}}>",
- " ${0}",
- ""
+ "import React from 'react';",
+ "import { Story, Meta } from '@storybook/react';",
+ "",
+ "import { ${1:ComponentName}, ${1:ComponentName}Props } from './${1:ComponentName}';",
+ "",
+ "export default {",
+ " title: 'Components/${1:ComponentName}',",
+ " component: ${1:ComponentName},",
+ "} as Meta;",
+ "",
+ "const Template: Story<${1:ComponentName}Props> = (args) => <${1:ComponentName} {...args} />;",
+ "",
+ "export const Default = Template.bind({});",
+ "Default.args = {",
+ " ${2:prop}: ${3:value},",
+ "};"
]
},
- "Class Property Function": {
- "prefix": "cpf",
+ "API Fetch": {
+ "prefix": "apif",
"body": [
- "${1:propertyName} = (${2:params}) => {",
- " $0",
+ "const fetchData = async () => {",
+ " try {",
+ " const response = await fetch('${1:url}');",
+ " const data = await response.json();",
+ " console.log(data);",
+ " } catch (error) {",
+ " console.error('Error:', error);",
+ " }",
"};"
]
- }
+ },
+ "Theme Provider": {
+ "prefix": "thp",
+ "body": [
+ "import React from 'react';",
+ "import { ThemeProvider } from 'styled-components';",
+ "",
+ "const theme = {",
+ " colors: {",
+ " primary: '${1:#007bff}',",
+ " secondary: '${2:#6c757d}',",
+ " },",
+ "};",
+ "",
+ "const ThemedApp = () => (",
+ " ",
+ " ",
+ " ",
+ ");"
+ ]
+ },
+ "React.memo Component": {
+ "prefix": "rmc",
+ "body": [
+ "import React from 'react';",
+ "",
+ "const ${1:ComponentName} = React.memo(({ ${2:props} }) => {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ "});",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "useReducer Hook": {
+ "prefix": "urh",
+ "body": [
+ "const [state, dispatch] = useReducer((state, action) => {",
+ " switch (action.type) {",
+ " case '${1:ACTION_TYPE}':",
+ " return {...state, ${2:property}: action.payload};",
+ " default:",
+ " return state;",
+ " }",
+ "}, {",
+ " ${3:initialState}",
+ "});"
+ ]
+ },
+ "useRef Hook": {
+ "prefix": "urefh",
+ "body": [
+ "const ${1:refName} = useRef(${2:initialValue});"
+ ]
+ },
+ "useMemo with TypeScript": {
+ "prefix": "umht",
+ "body": [
+ "const ${1:memoizedValue} = useMemo<${2:ReturnType}>(() => {",
+ " return ${3:computeExpensiveValue}(${4:a}, ${5:b});",
+ "}, [${4:a}, ${5:b}]);"
+ ]
+ },
+ "Custom Hook with TypeScript": {
+ "prefix": "cuht",
+ "body": [
+ "import { useState, useEffect } from 'react';",
+ "",
+ "interface ${1:HookName}Props {",
+ " ${2:prop}: ${3:type};",
+ "}",
+ "",
+ "interface ${1:HookName}Result {",
+ " ${4:resultProp}: ${5:resultType};",
+ "}",
+ "",
+ "const use${1:HookName} = ({ ${2:prop} }: ${1:HookName}Props): ${1:HookName}Result => {",
+ " const [${4:resultProp}, set${4/(.*)/${1:/capitalize}/}] = useState<${5:resultType}>(${6:initialValue});",
+ "",
+ " useEffect(() => {",
+ " // Effect logic",
+ " $0",
+ " }, [${2:prop}]);",
+ "",
+ " return { ${4:resultProp} };",
+ "}",
+ "",
+ "export default use${1:HookName};"
+ ]
+ },
+ "React Portal": {
+ "prefix": "rpt",
+ "body": [
+ "import ReactDOM from 'react-dom';",
+ "",
+ "const ${1:PortalComponent} = ({ children }) => {",
+ " const el = document.getElementById('${2:portal-root}');",
+ " return el ? ReactDOM.createPortal(children, el) : null;",
+ "};"
+ ]
+ },
+ "React.lazy with Suspense": {
+ "prefix": "rlz",
+ "body": [
+ "import React, { Suspense } from 'react';",
+ "",
+ "const ${1:LazyComponent} = React.lazy(() => import('./${1:LazyComponent}'));",
+ "",
+ "const ${2:ParentComponent} = () => (",
+ " Loading...}>",
+ " <${1:LazyComponent} />",
+ " ",
+ ");"
+ ]
+ },
+ "useImperativeHandle Hook": {
+ "prefix": "uih",
+ "body": [
+ "useImperativeHandle(ref, () => ({",
+ " ${1:exposedMethod}: () => {",
+ " $0",
+ " }",
+ "}));"
+ ]
+ },
+ "React Component with PropTypes": {
+ "prefix": "rcpt",
+ "body": [
+ "import React from 'react';",
+ "import PropTypes from 'prop-types';",
+ "",
+ "const ${1:ComponentName} = ({ ${2:prop} }) => {",
+ " return (",
+ " ",
+ " {${2:prop}}",
+ "
",
+ " );",
+ "};",
+ "",
+ "${1:ComponentName}.propTypes = {",
+ " ${2:prop}: PropTypes.${3:type}.isRequired,",
+ "};",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "useLayoutEffect Hook": {
+ "prefix": "uleh",
+ "body": [
+ "useLayoutEffect(() => {",
+ " // Synchronous side effect",
+ " $0",
+ " return () => {",
+ " // Clean up",
+ " };",
+ "}, [${1:dependencies}]);"
+ ]
+ },
+ "React.forwardRef": {
+ "prefix": "rfr",
+ "body": [
+ "import React from 'react';",
+ "",
+ "const ${1:ComponentName} = React.forwardRef((props, ref) => {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ "});",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Custom React Hook with Typescript": {
+ "prefix": "crht",
+ "body": [
+ "import { useState, useEffect } from 'react';",
+ "",
+ "type ${1:HookName}Props = {",
+ " ${2:prop}: ${3:type};",
+ "};",
+ "",
+ "type ${1:HookName}Result = {",
+ " ${4:resultProp}: ${5:resultType};",
+ "};",
+ "",
+ "export const use${1:HookName} = ({ ${2:prop} }: ${1:HookName}Props): ${1:HookName}Result => {",
+ " const [${4:resultProp}, set${4/(.*)/${1:/capitalize}/}] = useState<${5:resultType}>(${6:initialValue});",
+ "",
+ " useEffect(() => {",
+ " // Effect logic",
+ " $0",
+ " }, [${2:prop}]);",
+ "",
+ " return { ${4:resultProp} };",
+ "};"
+ ]
+ },
+ "React Context with TypeScript": {
+ "prefix": "rctx",
+ "body": [
+ "import React, { createContext, useContext, useState } from 'react';",
+ "",
+ "type ${1:ContextName}Type = {",
+ " ${2:stateName}: ${3:StateType};",
+ " ${4:setterName}: React.Dispatch>;",
+ "};",
+ "",
+ "const ${1:ContextName}Context = createContext<${1:ContextName}Type | undefined>(undefined);",
+ "",
+ "export const ${1:ContextName}Provider: React.FC = ({ children }) => {",
+ " const [${2:stateName}, ${4:setterName}] = useState<${3:StateType}>(${5:initialState});",
+ "",
+ " return (",
+ " <${1:ContextName}Context.Provider value={{ ${2:stateName}, ${4:setterName} }}>",
+ " {children}",
+ " ",
+ " );",
+ "};",
+ "",
+ "export const use${1:ContextName} = (): ${1:ContextName}Type => {",
+ " const context = useContext(${1:ContextName}Context);",
+ " if (context === undefined) {",
+ " throw new Error('use${1:ContextName} must be used within a ${1:ContextName}Provider');",
+ " }",
+ " return context;",
+ "};"
+ ]
+ },
+ "React Query Hook": {
+ "prefix": "rqh",
+ "body": [
+ "import { useQuery } from 'react-query';",
+ "",
+ "const fetch${1:Data} = async () => {",
+ " const response = await fetch('${2:apiUrl}');",
+ " if (!response.ok) {",
+ " throw new Error('Network response was not ok');",
+ " }",
+ " return response.json();",
+ "};",
+ "",
+ "export const use${1:Data} = () => {",
+ " return useQuery('${3:queryKey}', fetch${1:Data}, {",
+ " staleTime: ${4:staleTime},",
+ " cacheTime: ${5:cacheTime},",
+ " });",
+ "};"
+ ]
+ },
+ "Recoil Atom": {
+ "prefix": "rca",
+ "body": [
+ "import { atom } from 'recoil';",
+ "",
+ "export const ${1:atomName}State = atom({",
+ " key: '${1:atomName}',",
+ " default: ${2:defaultValue},",
+ "});"
+ ]
+ },
+ "Recoil Selector": {
+ "prefix": "rcs",
+ "body": [
+ "import { selector } from 'recoil';",
+ "import { ${1:dependencyAtom} } from './atoms';",
+ "",
+ "export const ${2:selectorName} = selector({",
+ " key: '${2:selectorName}',",
+ " get: ({ get }) => {",
+ " const value = get(${1:dependencyAtom});",
+ " return ${3:computedValue};",
+ " },",
+ "});"
+ ]
+ },
+ "React Error Boundary with Fallback UI": {
+ "prefix": "reb",
+ "body": [
+ "import React, { Component, ErrorInfo, ReactNode } from 'react';",
+ "",
+ "interface ErrorBoundaryProps {",
+ " children: ReactNode;",
+ " fallback: ReactNode;",
+ "}",
+ "",
+ "interface ErrorBoundaryState {",
+ " hasError: boolean;",
+ "}",
+ "",
+ "class ErrorBoundary extends Component {",
+ " constructor(props: ErrorBoundaryProps) {",
+ " super(props);",
+ " this.state = { hasError: false };",
+ " }",
+ "",
+ " static getDerivedStateFromError(_: Error): ErrorBoundaryState {",
+ " return { hasError: true };",
+ " }",
+ "",
+ " componentDidCatch(error: Error, errorInfo: ErrorInfo) {",
+ " console.error('ErrorBoundary caught an error:', error, errorInfo);",
+ " }",
+ "",
+ " render() {",
+ " if (this.state.hasError) {",
+ " return this.props.fallback;",
+ " }",
+ "",
+ " return this.props.children;",
+ " }",
+ "}",
+ "",
+ "export default ErrorBoundary;"
+ ]
+ },
+ "React Custom Event Hook": {
+ "prefix": "rceh",
+ "body": [
+ "import { useEffect, useRef } from 'react';",
+ "",
+ "export function use${1:EventName}(handler: (event: ${2:EventType}) => void) {",
+ " const savedHandler = useRef<(event: ${2:EventType}) => void>();",
+ "",
+ " useEffect(() => {",
+ " savedHandler.current = handler;",
+ " }, [handler]);",
+ "",
+ " useEffect(() => {",
+ " const eventListener = (event: ${2:EventType}) => savedHandler.current?.(event);",
+ " window.addEventListener('${3:eventName}', eventListener);",
+ " return () => {",
+ " window.removeEventListener('${3:eventName}', eventListener);",
+ " };",
+ " }, []);",
+ "}"
+ ]
+ }
+
+
}
\ No newline at end of file