tessl/npm-remix-run--react

React DOM bindings for Remix web framework providing components, hooks, and utilities for full-stack React applications

—

Pending

Overview

Eval results

Files

Document Components

Name: tessl/npm-remix-run--react
Author: tessl

Components for managing HTML document structure including meta tags, stylesheets, scripts, and scroll restoration functionality.

Capabilities

Links

Renders link tags in the document head based on route-level links functions and asset manifest.

/**
 * Renders link tags in the document head for stylesheets and other resources
 * Automatically includes route-level links and critical CSS from asset manifest
 * @returns React element containing link tags
 */
function Links(): ReactElement;

Usage Example:

// In root.tsx layout
import { Links } from "@remix-run/react";

export default function App() {
  return (
    <html>
      <head>
        <Meta />
        <Links />
      </head>
      <body>{/* app content */}</body>
    </html>
  );
}

// In route file with links function
export const links: LinksFunction = () => {
  return [
    { rel: "stylesheet", href: "/styles/route.css" },
    { rel: "preload", href: "/fonts/font.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" },
  ];
};

Scripts

Renders script tags for the application including route modules and runtime scripts.

/**
 * Renders script tags for the application including route modules and runtime
 * Handles module loading, hydration, and development features like live reload
 * @param props - Optional script configuration
 * @returns React element containing script tags
 */
function Scripts(props?: ScriptProps): ReactElement;

interface ScriptProps {
  /** Nonce value for Content Security Policy */
  nonce?: string;
  /** Whether to suppress hydration warnings */
  suppressHydrationWarning?: boolean;
}

Usage Example:

// In root.tsx layout
import { Scripts } from "@remix-run/react";

export default function App() {
  return (
    <html>
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {/* app content */}
        <Scripts nonce="csp-nonce-value" />
      </body>
    </html>
  );
}

ScrollRestoration

Manages browser scroll restoration behavior for client-side navigation.

/**
 * Emulates browser scroll restoration on location changes
 * Manages scroll position during client-side navigation
 * @param props - Scroll restoration configuration
 * @returns React element containing scroll management script
 */
function ScrollRestoration(props?: ScrollRestorationProps): ReactElement;

interface ScrollRestorationProps extends ScriptProps {
  /** Function to generate storage key for scroll position */
  getKey?: (location: Location, matches: UIMatch[]) => string;
}

Usage Example:

// In root.tsx layout
import { ScrollRestoration } from "@remix-run/react";

export default function App() {
  return (
    <html>
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {/* app content */}
        <ScrollRestoration 
          getKey={(location, matches) => {
            // Custom key generation logic
            return location.pathname;
          }}
        />
        <Scripts />
      </body>
    </html>
  );
}

LiveReload

Development-only component that enables live browser reloading during development.

/**
 * Development-only component for live browser reloading
 * Automatically removed in production builds
 * @param props - Live reload configuration
 * @returns React element containing live reload script (development only)
 */
function LiveReload(props?: LiveReloadProps): ReactElement | null;

interface LiveReloadProps {
  /** Port number for the live reload server */
  port?: number;
  /** Timeout for reconnection attempts */
  timeoutMs?: number;
  /** Custom origin for the live reload server */
  origin?: string;
  /** Nonce value for Content Security Policy */
  nonce?: string;
}

Usage Example:

// In root.tsx layout
import { LiveReload } from "@remix-run/react";

export default function App() {
  return (
    <html>
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {/* app content */}
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Type Definitions

Meta Function Types

type MetaFunction<Loader = unknown, ParentsLoaders = {}> = (
  args: MetaArgs<Loader, ParentsLoaders>
) => MetaDescriptor[];

interface MetaArgs<Loader = unknown, ParentsLoaders = {}> {
  data: SerializeFrom<Loader>;
  params: Params;
  request: Request;
  location: Location;
  matches: MetaMatches<ParentsLoaders>;
  error?: Error;
}

type MetaDescriptor = 
  | { title: string }
  | { name: string; content: string }
  | { property: string; content: string }
  | { httpEquiv: string; content: string }
  | { charset: string }
  | { "script:ld+json": LdJsonObject }
  | { tagName: "meta"; [key: string]: string }
  | { tagName: string; [key: string]: unknown };

Links Function Types

interface LinksFunction {
  (): HtmlLinkDescriptor[];
}

interface HtmlLinkDescriptor {
  /** Address of the hyperlink */
  href?: string;
  /** Relationship between documents */
  rel: string;
  /** Media query for the resource */
  media?: string;
  /** MIME type of the linked resource */
  type?: string;
  /** Integrity hash for subresource integrity */
  integrity?: string;
  /** Cross-origin policy */
  crossOrigin?: "anonymous" | "use-credentials";
  /** Referrer policy */
  referrerPolicy?: string;
  /** Sizes for icons */
  sizes?: string;
  /** Potential destination for preload */
  as?: string;
  /** Language of the linked resource */
  hrefLang?: string;
}

Implementation Notes

Server-Side Rendering: All document components work correctly during SSR and client hydration
Route Aggregation: Meta and Links automatically collect data from all matched routes in the hierarchy
Development Features: LiveReload is automatically excluded from production builds
Content Security Policy: All components support nonce values for CSP compliance
Progressive Enhancement: Components work even if JavaScript is disabled or fails to load