react-activity-patterns
Public
Pull mirror status: ok
J
Merge pull request #2 from vercel-labs/chore/minimum-release-age
app
e2e
.gitignore
.prettierignore
.prettierrc
next.config.ts
package.json
playwright.config.ts
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
tsconfig.json

Activity Patterns Demo

A Next.js demo showcasing React's Activity component patterns for persisting DOM and React state across hide/show cycles.

Patterns Demonstrated

PatternComponentWhat it shows
DOM State PreservationFiltersPanel<details>, inputs, checkboxes persist when hidden
Tabs & NavigationDataViewerList/table views preserve scroll, selection, sort
Prerendering Hidden ContentProductReviewsData fetches while hidden, instant reveal
Reset on HideNewsletterFormShows success message, resets when sidebar hidden
Effect CleanupLiveTimerInterval pauses when hidden, resumes when shown
Media CleanupVideoPlayerVideo pauses automatically when hidden

Getting Started

pnpm install
pnpm dev

Open http://localhost:3000.

Try It Out

  1. Toggle the sidebar - Expand some filters, type in the search box, then hide/show the sidebar. All state is preserved.

  2. Switch between List and Table views - Select an item in list view, sort by price in table view, then switch back and forth. State is preserved in both.

  3. Show Reviews - Click "Show Reviews" and they appear instantly (prefetched while hidden).

  4. Subscribe to newsletter - Submit the form, see the success message, then hide the sidebar. When you show it again, the form is reset.

  5. Watch the timer - Note the elapsed time, hide the sidebar, wait a few seconds, then show it again. The timer paused while hidden.

  6. Play the video - Start playback, then click "Hide Video". The video pauses automatically.

Learn More