CODEWITHSUNDEEP
javascriptreactjsmobile
Andrea Costanzo
Andrea Costanzo

Reputation: 2215

React: trigger a zoom out after a zoom in caused by input focus

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.

Upvotes: 2

Views: 4020

Answers (2)

Opsi Daisy
Opsi Daisy

Reputation: 80

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.

Upvotes: 1

JBS
JBS

Reputation: 686

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

Upvotes: 0

Related Questions