2

There is a way to zoom out a page in React after the page was zoomed-in because an <input> got focused? Imagine a simple component like the following: I'd like to zoom out on form submit.

const Component = (props) =>{

 const handleSubmit = (e) => {
   e.preventDefault();
   //Zoom out
 }

 return(
   <form onSubmit={handleSubmit}>
      <input/>
      <button>Sign in</button>
   </form>
 );
}

Important:

I do NOT want to disable the zoom-in effect. I found that by setting viewport maximum-scale=1 or by setting font-size to 16px I can disable it [Link here], but that's not the behaviour I want for my page.

AndreaCostanzo1
  • 1,799
  • 1
  • 12
  • 30

2 Answers2

1

You can try to wrap the contents in a div and use its ref to zoom.

const Layout: React.FC<props> = ({ pageHeader }) => {
  const wrapperRef = useRef(null);
  useEffect(() => {
    wrapperRef.current.style.zoom = "90%";
  }, []);

  return (
    <div ref={wrapperRef} style={{ width: "100%"}}>
      {/* rest of content here */}
    </div>);
}

I am not sure if it is the best way but I had the same issue, this works for me for now.

Opsi Daisy
  • 80
  • 1
  • 6
0

You could trigger this inside your handleSubmit() method to reset the zoom to 100%:

window.document.body.style.zoom = 1;

Note that this will not work in Firefox according to caniuse: https://caniuse.com/css-zoom

JBS
  • 639
  • 7
  • 17
  • 1
    I'm working with typescript and zoom can't be found among the styles belonging to `body`. Here is the error I get: `Property 'zoom' does not exist on type 'CSSStyleDeclaration'`. – AndreaCostanzo1 Nov 24 '21 at 13:20