Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@remix-run/react

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@remix-run/react

React DOM bindings for Remix

2.14.0
Source
npm

Version published: 2 weeks ago

Weekly downloads: 496K; increased by11.2%

Maintainers: 2

Weekly downloads

Created: 3 years ago

What is @remix-run/react?

@remix-run/react is a package that provides React components and hooks for building web applications with Remix, a full-stack web framework. It allows developers to handle routing, data loading, and form handling in a seamless and efficient manner.

What are @remix-run/react's main functionalities?

Routing

The routing feature allows you to define navigation within your application. The `Link` component is used to create navigable links, and the `Outlet` component is used to render the matched child route.

import { Link, Outlet } from '@remix-run/react';

function App() {
  return (
    <div>
      <nav>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Outlet />
    </div>
  );
}

Data Loading

The data loading feature allows you to fetch data on the server and pass it to your components. The `useLoaderData` hook is used to access the data loaded by the `loader` function.

import { useLoaderData } from '@remix-run/react';

export async function loader() {
  const data = await fetchData();
  return data;
}

function DataComponent() {
  const data = useLoaderData();
  return <div>{JSON.stringify(data)}</div>;
}

Form Handling

The form handling feature allows you to manage form submissions and handle the data on the server. The `Form` component is used to create forms, and the `useActionData` hook is used to access the data returned by the `action` function.

import { Form, useActionData } from '@remix-run/react';

export async function action({ request }) {
  const formData = await request.formData();
  const result = await processFormData(formData);
  return result;
}

function FormComponent() {
  const actionData = useActionData();
  return (
    <Form method="post">
      <input type="text" name="name" />
      <button type="submit">Submit</button>
      {actionData && <div>{JSON.stringify(actionData)}</div>}
    </Form>
  );
}

Other packages similar to @remix-run/react

Welcome to Remix!

Remix is a web framework that helps you build better websites with React.

To get started, open a new shell and run:

npx create-remix@latest

Then follow the prompts you see in your terminal.

For more information about Remix, visit remix.run!

v2.14.0

Date: 2024-11-08

Minor Changes

Deprecate SerializeFrom in favor of generics because it will be removed in React Router v7 (#10173)
Add deprecation warning to @remix-run/eslint-config (#10174)
Add support for routes.ts behind future.unstable_routeConfig flag to assist with the migration to React Router v7. (#10107)

Config-based routing is the new default in React Router v7, configured via the routes.ts file in the app directory. Support for routes.ts and its related APIs in Remix are designed as a migration path to help minimize the number of changes required when moving your Remix project over to React Router v7. While some new packages have been introduced within the @remix-run scope, these new packages only exist to keep the code in routes.ts as similar as possible to the equivalent code for React Router v7.

When the unstable_routeConfig future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing.

To enable the flag, in your vite.config.ts file:
```
remix({
  future: {
    unstable_routeConfig: true,
  },
});
```
A minimal routes.ts file to support Remix's built-in file system routing looks like this:
```
// app/routes.ts
import { flatRoutes } from "@remix-run/fs-routes";
import type { RouteConfig } from "@remix-run/route-config";

export const routes: RouteConfig = flatRoutes();
```
Log deprecation warnings for v3 future flags (#10126)
- Add @deprecated annotations to json/defer utilities

Patch Changes

Fix defaultShouldRevalidate value when using single fetch (#10139)
Update externally-accessed resource routes warning to cover null usage as well (#10145)

Updated Dependencies

Changes by Package

Full Changelog: v2.13.1...v2.14.0

FAQs

What is @remix-run/react?

Is @remix-run/react popular?

Is @remix-run/react well maintained?

Package last updated on 08 Nov 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install