@solid-primitives/mutation-observer


Primitive providing the ability to watch for changes made to the DOM tree. A wrapper for Browser's MutationObserver API.

Installation

``
npm install @solid-primitives/mutation-observer


or


yarn add @solid-primitives/mutation-observer
`

How to use it

$3

`ts
import { createMutationObserver } from "@solid-primitives/mutation-observer";

// Simple usage with on a single parent element.
let ref!: HTMLElement;
createMutationObserver(
() => ref,
{ attributes: true, subtree: true },
records => console.log(records)
);

// Observing multiple parent elements:
createMutationObserver(
() => [el1, el2, el3],
{ attributes: true, subtree: true },
e => {...}
);

// Set individual MutationObserver options:
createMutationObserver(
[
[el, { attributes: true, subtree: true }],
[el1, { childList: true }]
],
e => {...}
);

// Primitive return usefull values:
const [observe, {start, stop, instance}] = createMutationObserver(el, options, handler)

observe(el1, { childList: true })
stop()
`

$3

`tsx
// You have to name it as "mutationObserver" when using typescript
const [mutationObserver] = createMutationObserver([], e => {...})


`

$3

`tsx
import { mutationObserver } from "@solid-primitives/mutation-observer";

// has to be used in code to avoid tree-shaking it:
mutationObserver;


`

$3

`ts
function createMutationObserver(
initial: MaybeAccessor,
options: MutationObserverInit,
callback: MutationCallback,
): MutationObserverReturn;
function createMutationObserver(
initial: MaybeAccessor<[Node, MutationObserverInit][]>,
callback: MutationCallback,
): MutationObserverReturn;

type MutationObserverReturn = [
add: MutationObserverAdd,
rest: {
start: Fn;
stop: Fn;
instance: MutationObserver;
isSupported: boolean;
},
];

type MutationObserverAdd = (target: Node, options?: MaybeAccessor) => void;
``

Demo

https://codesandbox.io/s/solid-mutation-observer-p59tu?file=/index.tsx

Changelog

See CHANGELOG.md