Javascript - How to add/remove event on screen resize

shahzadshah
December 6, 2023
285 views
0 votes
2 Answers

Following is my code:

useEffect(() => {
    const handler = ev => {
      console.log(ev.data, src, ev.data.form);

      if (ev.data.type === "height") {
        if (ev.data.form === src) {
          setHeight((parseInt(ev.data.message, 10) + 10) + "px");
        }
      }
      if (ev.data.type === "popup") {
        if (ev.data.form === src) {
          setPopUpModel(ev.data.message);
        }
      }
    };

    if (typeof window !== "undefined") {
      window.addEventListener("message", handler);

      return () => window.removeEventListener("message", handler);
    }
  },

In web form I have a Submit button and it looks very good when I resize my screen the submit button gets cut like below:

Can anyone help me with what should I add to my syntax to solve this issue?

Answers

Attach the same listener for resize also

If its possible please try to do this stuff using css itself, it will save you a lot of maintenance time!

useEffect(() => {
    const handler = ev => {
      console.log(ev.data, src, ev.data.form);

      if (ev.data.type === "height") {
        if (ev.data.form === src) {
          setHeight((parseInt(ev.data.message, 10) + 10) + "px");
        }
      }
      if (ev.data.type === "popup") {
        if (ev.data.form === src) {
          setPopUpModel(ev.data.message);
        }
      }
    };

    if (typeof window !== "undefined") {
      window.addEventListener("message", handler);
      window.addEventListener("resize", handler);

      return () => {
          window.removeEventListener("message", handler);
          window.removeEventListener("resize", handler);
      }
    }
  },

const [ height, setHeight ] = useState('');

useEffect(() => {
 const handler = ev => {
   // here will be your existing code
 };
 
 if( typeof window !== "underfined") {
   window.addEventListener('message', handler);
   return () => window.removeEventListener('message', handler);
 }
}, []);


return(
  <div style={{ minHeight: '100vh }}>
    <button>
      style={{ height: height, minWidth: '150px' }}
      onClick={handleClick}
    </button>
  </div>
)

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How to add/remove event on screen resize

Answers