Components

View as Markdown

Components available from neutron.

Navigate between pages without a full reload (in app mode).

<Link to="/about">About</Link>

| Prop | Type | Description | | :--- | :--- | :--- | | to | string | The URL path. | | prefetch | "intent" \| "render" \| "none" | When to prefetch data. |

A special version of <Link> that knows when it is active.

<NavLink 
  to="/dashboard"
  className={({ isActive }) => isActive ? "active" : ""}
>
  Dashboard
</NavLink>

<Form>

Progressive enhancement wrapper for HTML forms.

<Form method="post" action="/update">
  {/* inputs */}
</Form>

Layout children

A layout renders its child route via the standard children prop — Neutron has no <Outlet> component.

// _layout.tsx
import type { ComponentChildren } from "preact";

export default function Layout({ children }: { children?: ComponentChildren }) {
  return (
    <div>
      <Sidebar />
      {children}
    </div>
  );
}

<Island>

Renders an interactive component inside a static route.

<Island component={MyComponent} client="load" />

<ViewTransitions>

Enables View Transitions API support. Place in the <head> of your root layout.

<head>
  <ViewTransitions />
</head>