Activity

Keeps its children alive while hidden: mode="hidden" removes them from sight but keeps their state, their DOM nodes and their focus and scroll position. Hidden content is paused: its effects run their cleanups and wait, its memos keep their last value, and its DOM does not update. Updates that arrive while hidden are applied once, when the content is shown again.

Use it for tabs, wizards and routes you want back instantly. A hidden Activity mounted hidden renders its DOM once (so it is ready to show) and runs no effects until it is shown. The server renders the children without hiding them; the client hides them once it hydrates.

Import#

import { Activity } from "@shadow-js/web";

Signature#

function Activity(props: ActivityProps): Accessor<unknown>

Parameters#

Returns#

An accessor of the content (two anchors and the children).

Examples#

import { useSignal } from "@shadow-js/core";
import { Activity } from "@shadow-js/web";

function Chat() {
  return <p>Chat</p>;
}

function Tabs() {
  const [tab] = useSignal("chat");
  return (
    <Activity mode={tab() === "chat" ? "visible" : "hidden"}>
      <Chat />
    </Activity>
  );
}