Menu

gitpiper

useMutationObserver react Code Snippet in 2022

hookseffectintermediate

Last Updated: 25 September 2022

Watches for changes made to the DOM tree, using a MutationObserver

  • Use a useEffect() hook that depends on the values of callback and options.
  • Check if the given ref is initialized. If it is, create a new MutationObserver and pass it the callback.
  • Call MutationObserver.observe() with the given options to watch the given ref for changes.
  • Use MutationObserver.disconnect() to remove the observer from the ref when the component unmounts.
const useMutationObserver = ( ref, callback, options = { attributes: true, characterData: true, childList: true, subtree: true, } ) => { React.useEffect(() => { if (ref.current) { const observer = new MutationObserver(callback); observer.observe(ref.current, options); return () => observer.disconnect(); } }, [callback, options]); };
const App = () => { const mutationRef = React.useRef(); const [mutationCount, setMutationCount] = React.useState(0); const incrementMutationCount = () => { return setMutationCount(mutationCount + 1); }; useMutationObserver(mutationRef, incrementMutationCount); const [content, setContent] = React.useState('Hello world'); return ( <> <label for="content-input">Edit this to update the text:</label> <textarea id="content-input" style={{ width: '100%' }} value={content} onChange={e => setContent(e.target.value)} /> <div style={{ width: '100%' }} ref={mutationRef} > <div style={{ resize: 'both', overflow: 'auto', maxWidth: '100%', border: '1px solid black', }} > <h2>Resize or change the content:</h2> <p>{content}</p> </div> </div> <div> <h3>Mutation count {mutationCount}</h3> </div> </> ); }; ReactDOM.render(<App />, document.getElementById('root'));

react snippet similar to useMutationObserver For You in September 2022

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2022 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️