Val

Hooks

Client-side hooks for accessing Val content in React components.

useVal

Hook to access content from a Val module in client components.

Example

"use client";
import { useVal } from "@/val/val.client";
import pageVal from "./page.val";

export default function Page() {
  const content = useVal(pageVal);
  return <div>{content.title}</div>;
}

useValRoute

Hook for Val modules that use the .router() method. Takes parameters to resolve the correct route. See page router for more info.

Example

"use client";
import { useValRoute } from "@/val/val.client";
import pageVal from "./[slug]/page.val";

export default function Page({ params }: { params: { slug: string } }) {
  const content = useValRoute(pageVal, params);
  return <div>{content.title}</div>;
}