snippets.json

{
    "Endpoint Function": {
        "prefix": "rendpoint",
        "body": [
            "export const $1 = safeEndPoint(async (req: NextRequest, route: { params: { id: string } }) => {",
            "  try {",
            "    const body = $2.parse(await getBodyAsync(req));",
            "    const params = $2.parse(getParams(req));",
            "    const uriParams = route.params;",
            "",
            "    return NextResponse.json({});",
            "  } catch (err) {",
            "    return errorResponse(err as Error);",
            "  }",
            "}, false);"
        ],
        "description": "Endpoint Function"
    },
    "React Form Component": {
        "prefix": "rformtag",
        "body": [
            "<Form {...form}>",
            "  <form onSubmit={form.handleSubmit(onSubmit)}>"
        ],
        "description": "React Form Component"
    },
    "React onSubmit Function": {
        "prefix": "rsubmit",
        "body": [
            "async function onSubmit(values: Form) {",
            "  $2",
            "}"
        ],
        "description": "React onSubmit Function"
    },
    "React useForm": {
        "prefix": "rform",
        "body": [
            "const $1 = z.object({",
            "",
            "});",
            "",
            "type Form = z.infer<typeof $1>;",
            "",
            "const form = useForm<Form>({",
            "  resolver: zodResolver($1),",
            "  defaultValues: {",
            "    $2",
            "  },",
            "});"
        ],
        "description": "React useForm with zodResolver"
    },
    "React FormField": {
        "prefix": "rfield",
        "body": [
            "<div>",
            "  <FormField",
            "    control={form.control}",
            "    name=\"$1\"",
            "    render={({ field }) => (",
            "      <FormItem>",
            "        <FormLabel>$2</FormLabel>",
            "        <FormControl>",
            "          <Input",
            "            placeholder=\"$3\"",
            "            {...field}",
            "          />",
            "        </FormControl>",
            "        <FormMessage className=\"text-xs\" />",
            "      </FormItem>",
            "    )}",
            "  />",
            "</div>"
        ],
        "description": "React FormField Password Component"
    },
    "resp": {
        "prefix": "resp",
        "body": [
            "return NextResponse.json({",
            "   error : false,",
            "   message : \"$1\"",
            "   $2",
            "});",
            "}"
        ],
        "description": "Returns an invalid input response."
    },
    "rrouter": {
        "prefix": "rrouter",
        "body": [
            "const router = useRouter()"
        ]
    },
    "reactConst": {
        "prefix": "rconst",
        "body": [
            "const $1 = () => {",
            "   return $2",
            "}"
        ]
    },
    "reactFun": {
        "prefix": "rfun",
        "body": [
            "function $1() {",
            "return $2",
            "}"
        ]
    },
    "React UseMutation": {
        "prefix": "rmutation",
        "body": [
            "const { mutate: $1, isLoading } = useMutation(async () =>",
            "  api.post<Resp<$2>>(\"/api/$3\")",
            ");"
        ],
        "description": "React UseMutation snippet"
    },
    "React Query - useQuery Hook": {
        "prefix": "rquery",
        "body": [
            "const { data, isLoading, isError, error } = useQuery(['$1'], async () => $2 ",
            "});"
        ],
        "description": "React Query - useQuery Hook snippet"
    },
    "React useEffect Hook": {
        "prefix": "ruseffect",
        "body": [
            "useEffect(function $1() {",
            "$2",
            "}, []);"
        ],
        "description": "React useEffect Hook"
    },
    "log": {
        "prefix": "ll",
        "body": [
            "console.log('***',$1)"
        ]
    },
    "React State with useState": {
        "prefix": "rstate",
        "body": [
            "import { useState } from 'react'",
            "const [${1:stateName}, ${1/(.)(.*)/${1:/downcase}${2:/capitalize}/}] = useState(${2:initialValue});"
        ],
        "description": "Create a React state using the useState hook."
    },
    "React Componcnt with Typescript Props Interface": {
        "prefix": "rComp",
        "body": [
            "export function $1 (p: { $2 }) {",
            "  return (",
            "    <>",
            "    </>",
            "  );",
            "}"
        ],
        "description": "Create a React component with Typescript props interface."
    },
    "Next Page with Typescript Props Interface": {
        "prefix": "rpage",
        "body": [
            "export default function $1(p: {}) {",
            "  return <></>;",
            "}"
        ]
    }
}