Skip to content

feat: add portalTarget prop to mount viewer overlay in a custom DOM…#216

Merged
Caldis merged 3 commits into
Caldis:masterfrom
motopods:master
May 18, 2026
Merged

feat: add portalTarget prop to mount viewer overlay in a custom DOM…#216
Caldis merged 3 commits into
Caldis:masterfrom
motopods:master

Conversation

@motopods
Copy link
Copy Markdown
Contributor

The viewer overlay was always mounted on document.body with no way to scope it to a specific DOM subtree — a blocker for isolated containers, shadow-DOM hosts, and modal-within-modal layouts.

Changes

  • types/global.tsportalTarget?: HTMLElement | null added to InterfaceAndInteractionParams (public API surface)
  • types/default.tsportalTarget threaded through getConfigFromProps into configProps
  • Portal/Portal.tsxtarget prop widened to HTMLElement | null
  • Browser/Browser.tsxportalTarget destructured from getPropsWithEnv() and forwarded to <Portals target={portalTarget}>
  • Zmage.callee.tsx — imperative Zmage.browsing() path uses portalTarget ?? document.body as the React tree mount parent

Usage

// Component — overlay mounts inside a scoped container
<Zmage src="photo.jpg" portalTarget={containerRef.current} />

// Imperative
Zmage.browsing({ src: 'photo.jpg', portalTarget: myContainer })

Omitting portalTarget preserves the existing document.body default.

… element

* feat: add portalTarget prop for custom portal mount location

Agent-Logs-Url: https://github.com/motopods/react-zmage/sessions/d359f9e9-8370-4eff-bb9e-31623ffee11c

Co-authored-by: motopods <58200641+motopods@users.noreply.github.com>

* refactor: simplify portalTarget null handling per review feedback

Agent-Logs-Url: https://github.com/motopods/react-zmage/sessions/d359f9e9-8370-4eff-bb9e-31623ffee11c

Co-authored-by: motopods <58200641+motopods@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: motopods <58200641+motopods@users.noreply.github.com>
@Caldis
Copy link
Copy Markdown
Owner

Caldis commented May 18, 2026

Thanks for your contribution! This PR looks good, let me try it out.

@Caldis Caldis merged commit 887e5da into Caldis:master May 18, 2026
4 checks passed
Caldis added a commit that referenced this pull request May 18, 2026
Bump react-zmage to 1.9.0 and point all sandbox tarball checks at the 1.9.0 package.

Regenerate static docs metadata and asset references so the published website reports the new version.

The portalTarget feature was merged from PR #216 with synchronized public docs, playground examples, and llms-eval coverage.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants