Components

The React components exported from @gio.js/react: links, images, forms, fonts, structured data and animations.

tsx

import { GioLink, GioImage, GioForm, GioFont, JsonLd, Animate, LocaleLink } from '@gio.js/react';

Component	What it is for
`<GioLink>`	Links that navigate on the client, with prefetch and view transitions.
`<GioImage>`	Images resized and converted by the built-in optimizer.
`<GioForm>`	Forms that post to a page action, with or without JavaScript.
`<GioFont>`	A typed marker for a font declared in `[[fonts]]`.
`<JsonLd>`	Structured data for search engines.
`<Animate>`	Entrance animations when content scrolls into view.
`<LocaleLink>`	A `GioLink` that keeps the visitor's locale prefix.

The hooks from the same package - usePathname, useRouter, useWebSocket and the rest - are listed under Hooks.

The root layout (app/layout.tsx) is server-rendered HTML that never hydrates. Components that need JavaScript - GioLink's client navigation, GioForm's interception, Animate - only work in pages and nested layouts. Put shared navigation in a route group's layout, such as app/(site)/layout.tsx.

GioLink

Renders an <a> whose clicks the client router handles: it fetches the next page and renders it into the same React root, so shared layouts keep their state. It prefetches on hover by default (prefetch="viewport" or false to change that) and takes replace, scroll and transition.

tsx

<GioLink href="/about" transition="fade">About</GioLink>

GioLink reference

GioImage

Renders an <img> pointed at the /_gio/image optimizer, with a srcset of the widths [images] allowed_widths permits. Takes width, height and alt, plus sizes, fill, quality, priority, placeholder/blurDataURL and unoptimized.

tsx

<GioImage src="/photo.jpg" alt="" width={800} height={600} priority />

GioImage reference

GioForm

A <form method="post"> that posts to the page's action export. Without JavaScript it is a normal form; once hydrated it submits with fetch and renders the answer in place. useGioFormState() reads its pending state.

tsx

<GioForm>
  <input name="email" type="email" />
  <button>Subscribe</button>
</GioForm>

GioForm reference

GioFont

A typed marker that renders nothing. Fonts are self-hosted from [[fonts]] in gio.toml: the server copies them from public/ (or downloads them once) and injects the preload and stylesheet links itself.

tsx

<GioFont family="Inter" weights={[400, 700]} />

GioFont reference

JsonLd

Renders schema.org data as a <script type="application/ld+json">, escaped so no value can close the element. It needs no CSP nonce.

tsx

<JsonLd data={{ '@context': 'https://schema.org', '@type': 'Article', headline: post.title }} />

JsonLd reference

Animate

Fades, zooms or slides its children in when they scroll into view, using CSS keyframes and one shared IntersectionObserver. initAnimateObserver and observeElement expose that observer for your own elements.

tsx

<Animate enter="fade-up" delay={100}>...</Animate>

Animate reference

LocaleLink

A GioLink that prefixes href with the request locale when it is not the default one ([i18n] default_locale). The locale comes from useLocale(), so the prefixed href is already in the server HTML.

tsx

<LocaleLink href="/pricing">Pricing</LocaleLink>   // /fr/pricing on a French page

LocaleLink reference

Props of your app components

The props GioJS passes to the components in app/ are typed by @gio.js/core: LayoutProps ({ children, path }), PageProps<'/posts/:id'> for a page without getServerSideProps ({ params, searchParams } - a page with one renders with exactly the props it returned), ErrorPageProps and NotFoundPageProps. See Functions for the full list.

tsx

import type { ErrorPageProps, LayoutProps } from '@gio.js/core';

export default function RootLayout({ children }: LayoutProps) {
  return <html lang="en"><body>{children}</body></html>;
}

// app/error.tsx
export default function Error({ error, reset }: ErrorPageProps) {
  return <p>Something went wrong ({error.digest}) {reset && <button onClick={reset}>Retry</button>}</p>;
}