Create your own snippets extension for your React and Next.js projects

Haseeb
3 min readNov 12, 2023

--

Say goodbye to repetitive tasks and hello to increased productivity by creating your own snippets in vs code. Having these type of snippets make you feel like you are a pro react developer 😉. Without wasting time let`s dive into the vs code and learn how to set up it .

It is pretty simple just open the vs code then go to the settings > User Snippets> Create New Global snippets file with xyz.json name and then… nothing . It is simple as it is.

let me share with you my snippet file

{
"Console Log": {
"prefix": "cl",
"body": [
"console.log($1);"
]
},
"React useState": {
"prefix": "us",
"body": [
"const [$1, set$2] = useState($3);"
]
},

"React useEffect": {
"prefix": "ue",
"body": [
"useEffect(() => {",
" $1",
"}, [$2]);"
]
},
"React useCallback": {
"prefix": "ucb",
"body": [
"useCallback(() => {",
" $1",
"}, [$2]);"
]
},
"React useMemo": {
"prefix": "umm",
"body": [
"useMemo(() => {",
" $1",
"}, [$2]);"
]
},
"Async React Function Component": {
"prefix": "arjsfc",
"body": [
"const $1 = async () => {",
" return $2;",
"};",
"",
"export default $1;"
]
},
"Async React Function Component with Props": {
"prefix": "arjsfcp",
"body": [
"type $1Props ={}",
"",
"const $1 = async ({}: $1Props) => {",
" return $2;",
"};",
"",
"export default $1;"
]
},
"React Function Component": {
"prefix": "rjsfc",
"body": [
"const $1 = () => {",
" return $2;",
"};",
"",
"export default $1;"
]
},
"React Function Component with Props": {
"prefix": "rjsfcp",
"body": [
"interface $1Props {}",
"",
"const $1 = ({}: $1Props) => {",
" return $2;",
"};",
"",
"export default $1;"
]
}

,
"React Query useQuery for get request": {
"prefix": "rqg",
"body": [
"import { useQuery } from '@tanstack/react-query';",
"",
"const fetch${1} = async () => {",
" const response = await fetch('${2}');",
" const data = await response.json();",
" return data;",
"};",
"",
"const ${1} = () => {",
" const { data, isLoading, error } = useQuery('${1}', fetch${1});",
"",
" if (isLoading) {",
" return <div>Loading...</div>;",
" }",
"",
" if (error) {",
" return <div>Error: {error.message}</div>;",
" }",
"",
" return (",
" <div>",
" {data.map((${3}) => (",
" <div key={${3}.id}>",
" <h3>${3}.title</h3>",
" <p>${3}.completed ? 'Completed' : 'Not completed'}</p>",
" </div>",
" ))}",
" </div>",
" );",
"};",
"",
]
"export default ${1};",
},
"React Query useMutation for mutate request": {
"prefix": "rqm",
"body": [
"import { useMutation } from '@tanstack/react-query';",
"",
"const create${1} = async (new${1}) => {",
" const response = await fetch('${2}', {",
" method: 'POST',",
" headers: {",
" 'Content-Type': 'application/json',",
" },",
" body: JSON.stringify(new${1}),",
" });",
" const data = await response.json();",
" return data;",
"};",
"",
"const Create${1}Form = () => {",
" const [new${1}, setNew${1}] = useState('');",
"",
" const { mutate, isLoading, error } = useMutation(create${1}, {",
" onSuccess: (data) => {",
" setNew${1}('');",
" console.log('${1} created successfully!');",
" },",
" onError: (error) => {",
" console.error('Error creating ${1}:', error);",
" },",
" });",
"",
" const handleSubmit = async (event) => {",
" event.preventDefault();",
"",
" if (!new${1}) {",
" return;",
" }",
"",
" await mutate({ title: new${1}, completed: false });",
" };",
"",
" return (",
" <form onSubmit={handleSubmit}>",
" <input",
" type=\"text\"",
" value={new${1}}",
" onChange={(event) => setNew${1}(event.target.value)}",
" />",
" <button type=\"submit\" disabled={isLoading}>Create ${1}</button>",
" </form>",
" );",
"};",
"",
"export default Create${1}Form;",
]
}
}

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Haseeb
Haseeb

Responses (2)

Write a response