I am writing a react application in which I need to set the zoom level of a particular page to 90%. I know that I can do it using document.body.style.zoom = '90%' as given below:

useEffect(() => {
    document.body.style.zoom = "90%";
  }, []);

It's a basic ponentDidMount function in react using useEffect. But the problem is how to set the zoom level back to the default as it was before loading the page using ponentDidUnmount?

I am writing a react application in which I need to set the zoom level of a particular page to 90%. I know that I can do it using document.body.style.zoom = '90%' as given below:

useEffect(() => {
    document.body.style.zoom = "90%";
  }, []);

It's a basic ponentDidMount function in react using useEffect. But the problem is how to set the zoom level back to the default as it was before loading the page using ponentDidUnmount?

• javascript
• reactjs
• react-hooks

1 Answer 1

Add cleanup effect as callback returned from useEffect.

The clean-up function runs before the ponent is removed from the UI to prevent memory leaks.

const Zoom = () => {
  useEffect(() => {
    const initialValue = document.body.style.zoom;

    // Change zoom level on mount
    document.body.style.zoom = "150%";

    return () => {
      // Restore default value
      document.body.style.zoom = initialValue;
    };
  }, []);
  return <></>;
};

Such callback acts like ponentWillUnmount.