PortalContext

The context through which a server render hands portals their collector: the renderers provide it when they are given a portals option (see createServerPortals).

The context through which a server render hands portals their collector: the renderers provide it when they are given a portals option (see createServerPortals). A custom portal reads it on the server and records its markup under its hydration key, so the client's claimPortal adopts it. Its value is null for every other render, and in the browser, where a portal writes nothing on the server.

Import#

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

Signature#

const PortalContext: Context<PortalSink | null>

Examples#

import { useContext } from "@shadow-js/core";
import { nextKey, PortalContext } from "@shadow-js/web/extend";
import { escape } from "@shadow-js/web/server";

function ServerToast(props: { text: string }): null {
  const key = nextKey();
  const sink = useContext(PortalContext);
  if (sink !== null && key !== undefined) sink.add(key, `<div role="status">${escape(props.text)}</div>`);
  return null;
}