or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

application-entry-points.mddata-loading-hooks.mddata-response-utilities.mddocument-components.mdforms-and-navigation.mdindex.mdreact-router-integration.mdtype-definitions.md
tile.json

tessl/npm-remix-run--react

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@remix-run/react@2.17.x

To install, run

npx @tessl/cli install tessl/npm-remix-run--react@2.17.0

index.mddocs/

@remix-run/react

@remix-run/react provides React DOM bindings for the Remix web framework, enabling developers to build full-stack web applications with React that focus on user interface and web fundamentals. It offers seamless integration with React Router for routing, includes components and hooks for data loading, form handling, navigation, and error boundaries, and provides client-server communication through loaders and actions.

Package Information

  • Package Name: @remix-run/react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @remix-run/react

Core Imports

import {
  RemixBrowser,
  RemixServer,
  Form,
  Link,
  useLoaderData,
  useFetcher,
  Meta,
  Links,
  Scripts
} from "@remix-run/react";

For CommonJS:

const {
  RemixBrowser,
  RemixServer,
  Form,
  Link,
  useLoaderData,
  useFetcher,
  Meta,
  Links,
  Scripts
} = require("@remix-run/react");

Basic Usage

Client-Side Application

import { RemixBrowser } from "@remix-run/react";
import { hydrateRoot } from "react-dom/client";

hydrateRoot(document, <RemixBrowser />);

Server-Side Application

import { RemixServer } from "@remix-run/react";
import type { EntryContext } from "@remix-run/react";

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  return new Response(
    renderToString(
      <RemixServer context={remixContext} url={request.url} />
    ),
    {
      headers: { "Content-Type": "text/html" },
      status: responseStatusCode,
    }
  );
}

Route Component with Data Loading

import { useLoaderData, Form } from "@remix-run/react";
import type { LoaderFunctionArgs } from "@remix-run/node";

export async function loader({ params }: LoaderFunctionArgs) {
  return { user: await getUser(params.userId) };
}

export default function UserRoute() {
  const { user } = useLoaderData<typeof loader>();
  
  return (
    <div>
      <h1>{user.name}</h1>
      <Form method="post">
        <button type="submit">Update</button>
      </Form>
    </div>
  );
}

Architecture

@remix-run/react is structured around several key architectural components:

  • Application Components: RemixBrowser and RemixServer provide the main entry points for client and server rendering
  • React Router Integration: Re-exports routing components and hooks from react-router-dom for navigation and route matching
  • Document Components: Meta, Links, and Scripts manage the HTML document head and script loading
  • Enhanced Form Handling: Form component with progressive enhancement and server-side processing
  • Data Loading System: Hooks like useLoaderData, useActionData, and useFetcher for server-client data communication
  • Navigation Components: Enhanced Link and NavLink with prefetching capabilities
  • Error Boundaries: Built-in error handling with RemixErrorBoundary and error response utilities

Capabilities

Application Entry Points

Core components for initializing Remix applications on both client and server sides.

function RemixBrowser(props: RemixBrowserProps): ReactElement;

function RemixServer(props: RemixServerProps): ReactElement;

interface RemixBrowserProps {
  basename?: string;
}

interface RemixServerProps {
  context: EntryContext;
  url: string | URL;
  abortDelay?: number;
  nonce?: string;
}

Application Entry Points

Document Components

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

function Meta(): ReactElement;
function Links(): ReactElement;
function Scripts(props?: ScriptProps): ReactElement;
function ScrollRestoration(props?: ScrollRestorationProps): ReactElement;

Document Components

Forms and Navigation

Enhanced form handling and navigation components with progressive enhancement and prefetching capabilities.

function Form(props: RemixFormProps): ReactElement;
function Link(props: RemixLinkProps): ReactElement;
function NavLink(props: RemixNavLinkProps): ReactElement;

interface RemixFormProps extends FormProps {
  preventScrollReset?: boolean;
  replace?: boolean;
  reloadDocument?: boolean;
  navigate?: boolean;
}

Forms and Navigation

Data Loading Hooks

Hooks for accessing server-loaded data, handling form submissions, and managing client-server communication.

function useLoaderData<T = unknown>(): SerializeFrom<T>;
function useActionData<T = unknown>(): SerializeFrom<T> | undefined;
function useRouteLoaderData<T = unknown>(routeId: string): SerializeFrom<T> | undefined;
function useFetcher<T = unknown>(opts?: FetcherOptions): FetcherWithComponents<T>;
function useMatches(): UIMatch[];

Data Loading Hooks

React Router Re-exports

Complete re-export of React Router components, hooks, and utilities for routing functionality.

// Navigation Components
function Navigate(props: NavigateProps): ReactElement;
function Outlet(props?: OutletProps): ReactElement;
function Routes(props: RoutesProps): ReactElement;
function Route(props: RouteProps): ReactElement;

// Navigation Hooks
function useNavigate(): NavigateFunction;
function useLocation(): Location;
function useParams<K extends string = string>(): Readonly<Params<K>>;
function useSearchParams(): [URLSearchParams, SetURLSearchParams];
function useBeforeUnload(callback: (event: BeforeUnloadEvent) => void): void;
function useFormAction(): string;
function useHref(to: To, options?: { relative?: RelativeRoutingType }): string;
function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, options?: { target?: React.HTMLAttributeAnchorTarget; replace?: boolean; state?: any; preventScrollReset?: boolean; relative?: RelativeRoutingType }): (event: React.MouseEvent<E, MouseEvent>) => void;
function useSubmit(): SubmitFunction;
function useBlocker(blocker: BlockerFunction): Blocker;
function useViewTransitionState(to: To, opts?: { relative?: RelativeRoutingType }): boolean;
function unstable_usePrompt(message: string | boolean): void;

// Async Data Hooks
function useAsyncError(): Error | undefined;
function useAsyncValue<T = unknown>(): T;

// Additional React Router Hooks
function useFetchers(): Fetcher[];
function useMatch(pattern: PathPattern | string): PathMatch | null;
function useOutlet(context?: unknown): React.ReactElement | null;
function useOutletContext<Context = unknown>(): Context;
function useResolvedPath(to: To, options?: { relative?: RelativeRoutingType }): Path;
function useRevalidator(): { revalidate(): void; state: "idle" | "loading" };
function useRouteError(): unknown;
function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
function useInRouterContext(): boolean;
function useNavigationType(): NavigationType;

// Utility Functions
function isRouteErrorResponse(error: any): error is ErrorResponse;

React Router Integration

Data Response Utilities

Server runtime utilities for creating responses, redirects, and handling deferred data.

function json<Data>(data: Data, init?: ResponseInit): Response;
function defer<Data extends Record<string, unknown>>(data: Data, init?: ResponseInit): Response;
function redirect(url: string, init?: ResponseInit): Response;
function redirectDocument(url: string, init?: ResponseInit): Response;
function replace(url: string, init?: ResponseInit): Response;

Data Response Utilities

Type Definitions

Comprehensive type definitions for route modules, component props, and framework integration.

// Route Module Types
type ClientLoaderFunction = (args: ClientLoaderFunctionArgs) => ReturnType<LoaderFunction>;
type ClientActionFunction = (args: ClientActionFunctionArgs) => ReturnType<ActionFunction>;
type MetaFunction = (args: MetaArgs) => MetaDescriptor[];

// Component Types
interface HtmlLinkDescriptor {
  rel: string;
  href?: string;
  type?: string;
  media?: string;
  integrity?: string;
  crossOrigin?: "anonymous" | "use-credentials";
}

Type Definitions

Error Handling

function isRouteErrorResponse(error: any): error is ErrorResponse;

interface ErrorResponse {
  status: number;
  statusText: string;
  data: any;
}

Remix provides built-in error boundaries and utilities for handling route-level errors, including server errors, not found errors, and client-side errors.