Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions next-env.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
2 changes: 1 addition & 1 deletion src/components/Icon/IconExperimental.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {memo} from 'react';

export const IconExperimental = memo<
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
>(function IconCanary(
>(function IconExperimental(
{className, title, size} = {
className: undefined,
title: undefined,
Expand Down
3 changes: 2 additions & 1 deletion src/components/MDX/MDXComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {finishedTranslations} from 'utils/finishedTranslations';

import ErrorDecoder from './ErrorDecoder';
import {IconCanary} from '../Icon/IconCanary';
import {IconExperimental} from 'components/Icon/IconExperimental';

function CodeStep({children, step}: {children: any; step: number}) {
return (
Expand Down Expand Up @@ -130,7 +131,7 @@ const ExperimentalBadge = ({title}: {title: string}) => (
className={
'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
}>
<IconCanary
<IconExperimental
size="s"
className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11465,6 +11465,14 @@ _For more background on how we built View Transitions, see: [#31975](https://git

## Activity {/*activity*/}

<Note>

**`<Activity />` is now available in React’s Canary channel.**

[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)

</Note>

In [past](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen) [updates](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity), we shared that we were researching an API to allow components to be visually hidden and deprioritized, preserving UI state with reduced performance costs relative to unmounting or hiding with CSS.

We're now ready to share the API and how it works, so you can start testing it in experimental React versions.
Expand Down
16 changes: 5 additions & 11 deletions src/content/reference/react/Activity.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,15 @@
---
title: <Activity>
version: experimental
version: canary
---

<Experimental>
<Canary>

**This API is experimental and is not available in a stable version of React yet.**
**The `<Activity />` API is currently only available in React’s Canary and Experimental channels.**

You can try it by upgrading React packages to the most recent experimental version:
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)

- `react@experimental`
- `react-dom@experimental`
- `eslint-plugin-react-hooks@experimental`

Experimental versions of React may contain bugs. Don't use them in production.

</Experimental>
</Canary>

<Intro>

Expand Down
2 changes: 1 addition & 1 deletion src/sidebarReference.json
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
{
"title": "<Activity>",
"path": "/reference/react/Activity",
"version": "experimental"
"version": "canary"
},
{
"title": "<ViewTransition>",
Expand Down