We pass an empty dependencies array to useEffect, so that it is called only once in the component’s lifetime, and the resize event listener is only registered once – when the component first renders. In our example, the action is to add the event listener for the resize hook with the addEventListener() method.

Reading time: 3 min JavaScript has a native and easy-to-use API to listen for element resize.

The useEffect hook is used to perform an action when a component first renders, and when one or more specified dependencies change. It can accept three, five, or nine parameters and has the following syntax. We can use it to resize and crop our images by passing an appropriate number of arguments. The first is a variable that stores the state, and the second is a function that updates the state when it is called. The drawImage () method of the canvas API will have an important role to play here.

The useState hook returns an array of two values. We use the useState React hook to create a state variable that will update whenever the width of the window changes. The resize event is fired whenever the width or height of the window/document view changes. The innerWidth property returns the interior width of the window in pixels, including the width of the vertical scrollbar, if it is present. The text is updated with the width of the window when it is resized.

drawImage function allows us to render and scale images on canvas element. Resizing images in browser using canvas is relatively simple.

Window.removeEventListener('resize', handleWindowResize) Image resizing in JavaScript - Using canvas element The HTML

Resize js