moderator-toolbox-nxg-for-reddit / util/ui/reactMount

reactMount¶

Functions¶

applyStylesToShadow()¶

applyStylesToShadow(shadowRoot): void

Defined in: extension/data/util/ui/reactMount.tsx:31

Parameters¶

shadowRoot¶

ShadowRoot

Returns¶

void

classes()¶

classes(…stuff): string

Defined in: extension/data/util/ui/reactMount.tsx:235

Joins a mix of strings and falsy values into one space-separated className, discarding anything falsy.

Parameters¶

stuff¶

…(string | false | null | undefined)[]

Returns¶

string

mountPopup()¶

mountPopup(factory, onClose?, key?): () => void

Defined in: extension/data/util/ui/reactMount.tsx:203

Mounts a popup component into document.body and wires up cleanup. The factory receives the cleanup function as its onClose so the component can close itself. The returned function tears down the popup and optionally calls an external onClose callback.

Eliminates the repeated let-mounted / cleanup boilerplate in every showXxx() function across the codebase.

Pass key to deduplicate by identity: if a popup with the same key is already open, no duplicate is mounted - the existing one is revealed (raised, recovered on-screen, focused) and its cleanup is returned. Use a per-target key (e.g. usernote:${subreddit}:${user}) so distinct targets each get their own popup while re-opening the same target reveals the live instance.

Parameters¶

factory¶

(onClose) => ReactElement

onClose?¶

() => void

key?¶

string

Returns¶

() => void

mountReactInBody()¶

mountReactInBody(content, name?): object

Defined in: extension/data/util/ui/reactMount.tsx:84

Imperatively mount React content into a freshly-created shadow host appended to document.body. Returns the host element and an unmount function that tears down the React root and removes the host. Use this when the popup is triggered by a non-React DOM event (e.g. a delegate(document.body, 'click', ...) handler reacting to a click on a button injected into Reddit’s DOM).

Parameters¶

content¶

ReactNode

name?¶

string

Returns¶

object

host¶

host: HTMLElement

unmount¶

unmount: () => void

Returns¶

void

mountReactInLightBody()¶

mountReactInLightBody(content, name?): object

Defined in: extension/data/util/ui/reactMount.tsx:114

Imperatively mount React content into a freshly-created light-DOM <div> appended to document.body. Unlike mountReactInBody, this does not use a shadow root - useful when the rendered content needs to be reachable by delegate(document.body, ...) handlers in other modules (e.g., the modbar “my subreddits” popup whose rows are clicked by queue_overlay.js handlers).

Parameters¶

content¶

ReactNode

name?¶

string

Returns¶

object

host¶

host: HTMLElement

unmount¶

unmount: () => void

Returns¶

void

mountToTarget()¶

mountToTarget(content, target, options?): () => void

Defined in: extension/data/util/ui/reactMount.tsx:251

Mounts React content into a new shadow DOM host appended to target.

Options:

key - stable string used as data-toolbox-mount on the host. If a host with the same key already exists inside target, the old one is removed first (idempotent re-mount). Omit when the caller guarantees at-most-once.
shadow - true (default) for shadow DOM, false for light DOM.
lifecycle - if provided, the unmount cleanup is registered with it.

Returns a cleanup function that unmounts the React root and removes the host.

Parameters¶

content¶

ReactNode

target¶

Element

options?¶

hostTag?¶

string

key?¶

string

lifecycle?¶

Lifecycle

name?¶

string

shadow?¶

boolean

Returns¶

() => void

reactRenderer()¶

reactRenderer(content, tag?): HTMLSelectElement | HTMLElement | HTMLInputElement | HTMLAnchorElement | HTMLHeadElement | HTMLSpanElement | HTMLStyleElement | HTMLButtonElement | HTMLTextAreaElement | HTMLObjectElement | HTMLLinkElement | HTMLMapElement | HTMLLabelElement | HTMLBodyElement | HTMLTitleElement | HTMLProgressElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLIElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPictureElement | HTMLPreElement | HTMLScriptElement | HTMLSlotElement | HTMLSourceElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement

Defined in: extension/data/util/ui/reactMount.tsx:66

Returns a DOM element which renders the given React/JSX content when added to the page. Defaults to a div; pass tag to use a different element.

Parameters¶

content¶

ReactNode

tag?¶

keyof HTMLElementTagNameMap = 'div'

Returns¶