Skateshop

Sidebar menu with layoutSegment

<aside> 💡 useSelectedLayoutSegment

</aside>

is a Client Component hook that lets you read the active route segment one level below the Layout it is called from.

It is useful for navigation UI, such as tabs inside a parent layout that change style depending on the active child segment.

Error Handling in utils

zod error, issue

ZodIssue is not a class. It is a discriminated union.

error options

...
.refine((data) => data.password === data.confirm, {
  message: "Passwords don't match",
  path: ["confirm"], // path of error
});

ZodError {
  issues: [{
    "code": "custom",
    "path": [ "confirm" ],
    "message": "Passwords don't match"
  }]
}

.. Refinements can also be async

.. Transforms and refinements can be interleaved:

transform and coerce

const stringToNumber = z.string().transform((val) => val.length);
stringToNumber.parse("string"); // => 6

const emailToDomain = z
  .string()
  .email()
  .transform((val) => val.split("@")[1]);

emailToDomain.parse("[email protected]"); // => example.com

...
// This is a special symbol you can use to
// return early from the transform function.
// It has type `never` so it does not affect the
// inferred return type.
return z.NEVER;