A React Hooks package for mutation-observer
npm install @rooks/use-mutation-observer``
npm install rooks
or
`
yarn add rooks
Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!
!Build Status   
`
npm install --save @rooks/use-mutation-observer
`javascript`
import useMutationObserver from "@rooks/use-mutation-observer"
`jsx
function Demo() {
const myRef = useRef();
const [mutationCount, setMutationCount] = useState(0);
const incrementMutationCount = () => {
return setMutationCount(mutationCount + 1);
};
useMutationObserver(myRef, incrementMutationCount);
const [XOffset, setXOffset] = useState(0);
const [YOffset, setYOffset] = useState(300);
return (
<>
width: 300,
background: "lightblue",
padding: "10px",
position: "absolute",
left: XOffset,
top: YOffset
}}
ref={myRef}
>
resize: "both",
overflow: "auto",
background: "white",
color: "blue",
maxWidth: "100%"
}}
>
Resize this div as you see fit. To demonstrate that it also updates
on child dom nodes resize
Mutation count {mutationCount}render(
`
| Argument | Type | Description | Default value |
| -------- | --------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| ref | React ref | Ref which should be observed for Mutations | undefined |
| callback | function | Function which should be invoked on mutation. It is called with the mutationList and observer` | undefined |
| config | object | Mutation Observer configuration | {attributes: true,,characterData: true,,subtree: true,,childList: true} |