Sensors

useOnElementRemoval

Fires a callback when the target element or any ancestor containing it is removed from the DOM. Uses MutationObserver internally.

Demo

On Element Removal

Removed: 0x

Click Remove to remove the element. The hook detects its removal.

Target Element

Usage

Hook
Scope

import { 
const useRef$: {
    <T = any>(initialValue: null): Ref$<T | null>;
    <T = any>(initialValue: T): Ref$<T>;
    <T = any>(): Ref$<T | null>;
}
useRef$ } from "@usels/core";
import { 
function useObservable<T>(): Observable<T | undefined> (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable } from "@usels/core";
import { 
const useOnElementRemoval: (target: MaybeEventTarget, callback: (mutations: MutationRecord[]) => void, options?: DeepMaybeObservable<UseOnElementRemovalOptions>) => void
useOnElementRemoval } from "@usels/web";

function 
function RemovalDetector(): JSX.Element
RemovalDetector() {
  const 
const el$: Ref$<HTMLDivElement | null>
el$ = 
useRef$<HTMLDivElement>(): Ref$<HTMLDivElement | null> (+2 overloads)
Core (framework-agnostic) version of useRef$.
Creates an observable element ref with opaque wrapping.

non-null value → Ref$<T>: current, get(), peek() return T
null / no arg → Ref$<T | null>: current, get(), peek() return T | null

Nullability is expressed via the type parameter, mirroring T | null at the call site.
useRef$<
interface HTMLDivElement
HTMLDivElement>();
  const 
const removed$: any
removed$ = 
useObservable<unknown>(value: Promise<unknown> | (() => unknown) | unknown, deps?: DependencyList): any (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable(false);

  
function useOnElementRemoval(target: MaybeEventTarget, callback: (mutations: MutationRecord[]) => void, options?: DeepMaybeObservable<UseOnElementRemovalOptions>): void
Framework-agnostic element-removal detector.
Tracks the target element reactively (via observe on get(target)), then
watches the document/root for childList mutations. When a removed node is or
contains the tracked element, callback fires and the tracked reference is
cleared so the next mount → removal cycle fires again.
useOnElementRemoval(
const el$: Ref$<HTMLDivElement | null>
el$, () => 
const removed$: any
removed$.
any
set(true));

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      {!
const removed$: any
removed$.
any
get() && <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div 
RefAttributes<HTMLDivElement>.ref?: Ref<HTMLDivElement> | undefined
Allows getting a ref to the component instance.
Once the component unmounts, React will set ref.current to null
(or call the ref with null if you passed a callback ref).
@see ― https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs
ref={
const el$: Ref$<HTMLDivElement | null>
el$}>Watch me!</
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>}
      {
const removed$: any
removed$.
any
get() && <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Element was removed!</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>}
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

import { observable, createRef$ } from "@usels/core";
import { createOnElementRemoval } from "@usels/web";

function RemovalDetector() {
  "use scope"
  const el$ = createRef$<HTMLDivElement>();
  const removed$ = observable(false);

  createOnElementRemoval(el$, () => removed$.set(true));

  return (
    <div>
      {!removed$.get() && <div ref={el$}>Watch me!</div>}
      {removed$.get() && <p>Element was removed!</p>}
    </div>
  );
}

Type

Parameters

Parameter	Type	Description
`target`	`MaybeEventTarget`	-
`callback`	`(mutations: MutationRecord[]) => void`	-
`options`	`ConfigurableDocumentOrShadowRoot` (optional)	-

Returns

void

Source

View on GitHub