Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTabs that render a panel only when its tab is first opened and then keep it mounted, so input and scroll survive tab trips, or throw it away when keepAlive is off.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this when tabs hold heavy or fetching content (charts, tables, editors) and most visits touch only one or two of them.
Do not use keepAlive for panels with subscriptions or timers that should stop when hidden.
It builds on tabs, which the CLI installs for you.
import { TabsLazyPanels } from "@/components/tabs-lazy-panels"<TabsLazyPanels
keepAlive
tabs={[
{ value: "activity", label: "Activity", render: () => <ActivityFeed /> },
]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
tabs | { value, label, render }[] | - | render is called lazily. |
keepAlive | boolean | true | Keep visited panels mounted. |
render function is not called.keepAlive, visited panels stay mounted and are hidden with the hidden attribute, so they leave the accessibility tree while inactive.| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | change tab |
The pattern ships a Testing Library test (tabs-lazy-panels.test.tsx) that covers not rendering unvisited panels, rendering on first visit, keeping input and discarding without keepAlive.