aboutsummaryrefslogtreecommitdiff

@astrojs/react

4.3.0

Minor Changes

Node.js 18 has now reached end-of-life and should not be used. For now, Astro will continue to support Node.js 18.20.8, which is the final LTS release of Node.js 18, as well as Node.js 20 and Node.js 22 or later. We will drop support for Node.js 18 in a future release, so we recommend upgrading to Node.js 22 as soon as possible. See Astro's Node.js support policy for more details.

:warning: Important note for users of Cloudflare Pages: The current build image for Cloudflare Pages uses Node.js 18.17.1 by default, which is no longer supported by Astro. If you are using Cloudflare Pages you should override the default Node.js version to Node.js 22. This does not affect users of Cloudflare Workers, which uses Node.js 22 by default.

4.2.7

Patch Changes

4.2.6

Patch Changes

4.2.5

Patch Changes

4.2.4

Patch Changes

4.2.3

Patch Changes

4.2.2

Patch Changes

4.2.1

Patch Changes

  • #13323 80926fa Thanks @ematipico! - Updates esbuild and vite to the latest to avoid false positives audits warnings caused by esbuild.

4.2.0

Minor Changes

This is useful to support libraries that are not compatible with streaming such as some CSS-in-JS libraries. To disable streaming for all React components in your project, set experimentalDisableStreaming: true as a configuration option for @astrojs/react:

```diff // astro.config.mjs import { defineConfig } from 'astro/config'; import react from '@astrojs/react';

export default defineConfig({ integrations: [ react({ + experimentalDisableStreaming: true, }), ], }); ```

4.1.6

Patch Changes

  • #12996 80c6801 Thanks @bluwy! - Removes hardcoded ssr.external: ['react-dom/server', 'react-dom/client'] config that causes issues with adapters that bundle all dependencies (e.g. Cloudflare). These externals should already be inferred by default by Vite when deploying to a server environment.

  • #13011 cf30880 Thanks @ascorbic! - Upgrades Vite

4.1.5

Patch Changes

  • #12887 ea603ae Thanks @louisescher! - Adds a warning message when multiple JSX-based UI frameworks are being used without either the include or exclude property being set on the integration.

4.1.4

Patch Changes

  • #12923 c7642fb Thanks @bluwy! - Removes react-specific entrypoints in optimizeDeps.include and rely on @vitejs/plugin-react to add

4.1.3

Patch Changes

4.1.2

Patch Changes

4.1.1

Patch Changes

4.1.0

Minor Changes

4.0.0

Major Changes

Minor Changes

  • #12539 827093e Thanks @bluwy! - Drops node 21 support

  • #12510 14feaf3 Thanks @bholmesdev! - Changes the generated URL query param from _astroAction to _action when submitting a form using Actions. This avoids leaking the framework name into the URL bar, which may be considered a security issue.

4.0.0-beta.2

Major Changes

Minor Changes

3.7.0-beta.1

Minor Changes

  • #12510 14feaf3 Thanks @bholmesdev! - Changes the generated URL query param from _astroAction to _action when submitting a form using Actions. This avoids leaking the framework name into the URL bar, which may be considered a security issue.

3.6.3

Patch Changes

  • #12481 8a46e80 Thanks @marbrex! - Resolve vite peer dependency problem for strict package managers like Yarn in PnP mode.

3.6.2

Patch Changes

  • #11624 7adb350 Thanks @bluwy! - Prevents throwing errors when checking if a component is a React component in runtime

3.6.1

Patch Changes

  • #11571 1c3265a Thanks @bholmesdev! - BREAKING CHANGE to the experimental Actions API only. Install the latest @astrojs/react integration as well if you're using React 19 features.

Make .safe() the default return value for actions. This means { data, error } will be returned when calling an action directly. If you prefer to get the data while allowing errors to throw, chain the .orThrow() modifier.

```ts import { actions } from 'astro:actions';

// Before const { data, error } = await actions.like.safe(); // After const { data, error } = await actions.like();

// Before const newLikes = await actions.like(); // After const newLikes = await actions.like.orThrow(); ```

## Migration

To migrate your existing action calls:

  • Remove .safe from existing safe action calls

  • Add .orThrow to existing unsafe action calls

  • #11570 84189b6 Thanks @bholmesdev! - BREAKING CHANGE to the experimental Actions API only. Install the latest @astrojs/react integration as well if you're using React 19 features.

Updates the Astro Actions fallback to support action={actions.name} instead of using getActionProps(). This will submit a form to the server in zero-JS scenarios using a search parameter:

```astro

import { actions } from 'astro:actions';

```

You may also construct form action URLs using string concatenation, or by using the URL() constructor, with the an action's .queryString property:

```astro

import { actions } from 'astro:actions';

const confirmationUrl = new URL('/confirmation', Astro.url); confirmationUrl.search = actions.queryString;

```

## Migration

getActionProps() is now deprecated. To use the new fallback pattern, remove the getActionProps() input from your form and pass your action function to the form action attribute:

```diff

import { actions, - getActionProps, } from 'astro:actions';

  • ```

3.6.0

Minor Changes

  • #11234 4385bf7 Thanks @ematipico! - Adds a new function called addServerRenderer to the Container API. Use this function to manually store renderers inside the instance of your container.

This new function should be preferred when using the Container API in environments like on-demand pages:

```ts import type { APIRoute } from 'astro'; import { experimental_AstroContainer } from 'astro/container'; import reactRenderer from '@astrojs/react/server.js'; import vueRenderer from '@astrojs/vue/server.js'; import ReactComponent from '../components/button.jsx'; import VueComponent from '../components/button.vue';

// MDX runtime is contained inside the Astro core import mdxRenderer from 'astro/jsx/server.js';

// In case you need to import a custom renderer import customRenderer from '../renderers/customRenderer.js';

export const GET: APIRoute = async (ctx) => { const container = await experimental_AstroContainer.create(); container.addServerRenderer({ renderer: reactRenderer }); container.addServerRenderer({ renderer: vueRenderer }); container.addServerRenderer({ renderer: customRenderer }); // You can pass a custom name too container.addServerRenderer({ name: 'customRenderer', renderer: customRenderer, }); const vueComponent = await container.renderToString(VueComponent); return await container.renderToResponse(Component); }; ```

3.5.0

Minor Changes

  • #11144 803dd80 Thanks @ematipico! - The integration now exposes a function called getContainerRenderer, that can be used inside the Container APIs to load the relative renderer.

```js import { experimental_AstroContainer as AstroContainer } from 'astro/container'; import ReactWrapper from '../src/components/ReactWrapper.astro'; import { loadRenderers } from 'astro:container'; import { getContainerRenderer } from '@astrojs/react';

test('ReactWrapper with react renderer', async () => { const renderers = await loadRenderers([getContainerRenderer()]); const container = await AstroContainer.create({ renderers, }); const result = await container.renderToString(ReactWrapper);

expect(result).toContain('Counter');
expect(result).toContain('Count: <!-- -->5');

}); ```

3.4.0

Minor Changes

This example calls a like action that accepts a postId and returns the number of likes. Pass this action to the experimental_withState() function to apply progressive enhancement info, and apply to useActionState() to track the result:

```tsx import { actions } from 'astro:actions'; import { experimental_withState } from '@astrojs/react/actions';

export function Like({ postId }: { postId: string }) { const [state, action, pending] = useActionState( experimental_withState(actions.like), 0, // initial likes );

return (
  <form action={action}>
    <input type="hidden" name="postId" value={postId} />
    <button disabled={pending}>{state} ❤️</button>
  </form>
);

} ```

You can also access the state stored by useActionState() from your action handler. Call experimental_getActionState() with the API context, and optionally apply a type to the result:

```ts import { defineAction, z } from 'astro:actions'; import { experimental_getActionState } from '@astrojs/react/actions';

export const server = { like: defineAction({ input: z.object({ postId: z.string(), }), handler: async ({ postId }, ctx) => { const currentLikes = experimental_getActionState(ctx); // write to database return currentLikes + 1; }, }), }; ```

3.3.4

Patch Changes

  • #10986 4d16381 Thanks @emish89! - Fixes incorrect peerDependencies for @types/react and @types/react-dom

3.3.3

Patch Changes

3.3.2

Patch Changes

3.3.1

Patch Changes

3.3.0

Minor Changes

This change is in line with Astro's Node.js support policy.

3.2.0

Minor Changes

3.1.1

Patch Changes

3.1.0

Minor Changes

  • #10136 9cd84bd19b92fb43ae48809f575ee12ebd43ea8f Thanks @matthewp! - Changes the default behavior of transition:persist to update the props of persisted islands upon navigation. Also adds a new view transitions option transition:persist-props (default: false) to prevent props from updating as needed.

Islands which have the transition:persist property to keep their state when using the <ViewTransitions /> router will now have their props updated upon navigation. This is useful in cases where the component relies on page-specific props, such as the current page title, which should update upon navigation.

For example, the component below is set to persist across navigation. This component receives a products props and might have some internal state, such as which filters are applied:

astro <ProductListing transition:persist products={products} />

Upon navigation, this component persists, but the desired products might change, for example if you are visiting a category of products, or you are performing a search.

Previously the props would not change on navigation, and your island would have to handle updating them externally, such as with API calls.

With this change the props are now updated, while still preserving state.

You can override this new default behavior on a per-component basis using transition:persist-props=true to persist both props and state during navigation:

astro <ProductListing transition:persist-props="true" products={products} />

3.0.10

Patch Changes

3.0.9

Patch Changes

3.0.8

Patch Changes

3.0.7

Patch Changes

3.0.7-beta.0

Patch Changes

3.0.6

Patch Changes

  • #9141 af43fb517 Thanks @lilnasy! - Fixes an issue where slotting self-closing elements (img, br, hr) into react components with experimentalReactChildren enabled led to an error.

3.0.5

Patch Changes

3.0.4

Patch Changes

3.0.3

Patch Changes

3.0.2

Patch Changes

3.0.1

Patch Changes

3.0.0

Major Changes

The React integration now fully supports React Refresh and is backed by @vitejs/plugin-react.

Also included in this change are new include and exclude config options. Use these if you want to use React alongside another JSX framework; include specifies files to be compiled for React and exclude does the opposite.

Patch Changes

3.0.0-rc.6

Patch Changes

3.0.0-rc.5

Patch Changes

3.0.0-rc.4

Major Changes

Patch Changes

  • Updated dependencies [6011d52d3]:
  • @astrojs/internal-helpers@0.2.0-rc.2

3.0.0-beta.3

Minor Changes

This adds a new configuration option for the React integration experimentalReactChildren:

js export default { integrations: [ react({ experimentalReactChildren: true, }), ], };

With this enabled, children passed to React from Astro components via the default slot are parsed as React components.

This enables better compatibility with certain React components which manipulate their children.

3.0.0-beta.2

Patch Changes

  • Updated dependencies [2aa6d8ace]:
  • @astrojs/internal-helpers@0.2.0-beta.1

3.0.0-beta.1

Major Changes

The React integration now fully supports React Refresh and is backed by @vitejs/plugin-react.

Also included in this change are new include and exclude config options. Use these if you want to use React alongside another JSX framework; include specifies files to be compiled for React and exclude does the opposite.

3.0.0-beta.0

Major Changes

  • 1eae2e3f7 Thanks @Princesseuh! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023.

2.3.2

Patch Changes

2.3.1

Patch Changes

2.3.0

Minor Changes

This adds a new configuration option for the React integration experimentalReactChildren:

js export default { integrations: [ react({ experimentalReactChildren: true, }), ], };

With this enabled, children passed to React from Astro components via the default slot are parsed as React components.

This enables better compatibility with certain React components which manipulate their children.

2.2.2

Patch Changes

  • #8075 da517d405 Thanks @SudoCat! - fix a bug where react identifierPrefix was set to null for client:only components causing React.useId to generate ids prefixed with null

2.2.1

Patch Changes

2.2.0

Minor Changes

This change introduces a new flag that renderers can add called supportsAstroStaticSlot. What this does is let Astro know that the render is sending <astro-static-slot> as placeholder values for static (non-hydrated) slots which Astro will then remove.

This change is completely backwards compatible, but fixes bugs caused by combining ssr-only and client-side framework components like so:

astro <Component> <div> <Component client:load> <span>Nested</span> </Component> </div> </Component>

Patch Changes

2.1.3

Patch Changes

2.1.2

Patch Changes

2.1.1

Patch Changes

2.1.0

Minor Changes

2.0.2

Patch Changes

2.0.1

Patch Changes

2.0.0

Major Changes

2.0.0-beta.0

See changes in 2.0.0-beta.0 ### Major Changes - [#5782](https://github.com/withastro/astro/pull/5782) [`1f92d64ea`](https://github.com/withastro/astro/commit/1f92d64ea35c03fec43aff64eaf704dc5a9eb30a) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Remove support for Node 14. Minimum supported Node version is now >=16.12.0

1.2.2

Patch Changes

1.2.1

Patch Changes

1.2.0

Minor Changes

This adds support for mui through configuration. Users will now not need to configure this library to get it to work.

1.1.4

Patch Changes

1.1.3

Patch Changes

1.1.2

Patch Changes

1.1.1

Patch Changes

1.1.0

Minor Changes

This prevents hydration from blocking the main thread when multiple islands are rendering at the same time.

1.1.0-next.0

Minor Changes

This prevents hydration from blocking the main thread when multiple islands are rendering at the same time.

1.0.0

Major Changes

No breaking changes. This package is now officially stable and compatible with astro@1.0.0!

0.4.3

Patch Changes

0.4.2

Patch Changes

0.4.1

Patch Changes

0.4.0

Minor Changes

  • #3914 b48767985 Thanks @ran-dall! - Rollback supported node@16 version. Minimum versions are now node@14.20.0 or node@16.14.0.

0.3.1

Patch Changes

0.3.0

Minor Changes

  • #3871 1cc5b7890 Thanks @natemoo-re! - Update supported node versions. Minimum versions are now node@14.20.0 or node@16.16.0.

0.2.1

Patch Changes

0.2.0

Minor Changes

Each slot is be passed as a top-level prop. For example:

```jsx // From .astro

Hello world!

Dash

Default
;

// For .jsx export default function Component({ title, slotWithDash, children }) { return ( <>

{title}
{slotWithDash}
{children}

); } ```

0.1.3

Patch Changes

  • #3455 e9a77d86 Thanks @natemoo-re! - Update client hydration to check for ssr attribute. Requires astro@^1.0.0-beta.36.

0.1.2

Patch Changes

  • #3337 678c2b75 Thanks @bholmesdev! - Fix: remove hydration failures on React v18 by exposing the "client" directive from Astro core.

0.1.1

Patch Changes

0.1.0

Minor Changes

0.0.2

Patch Changes

0.0.2-next.0

Patch Changes

  • #2847 3b621f7a Thanks @tony-sull! - Adds keywords to the official integrations to support discoverability on Astro's Integrations site
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-24 14:29:40 +0000