Follow this step-by-step tutorial to achieve the following result on CodeSandbox: Resizing Images Using Let’s see how to resize an image with Vanilla JavaScript. As you can imagine, both of these consequences fall on end-users – we want to avoid this. As we have previously explained you might also want to compress such images. Uploading large photos is time-consuming and may cost money in bandwidth.

That is because the quality of the images and their file sizes have been increasing for years.įor example, when letting users upload an image, you should always consider resizing it before uploading it. Resizing an image has become increasingly important. Thanks to the HTML element, this is a reasonably easy task to accomplish. 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 this article, you will learn how to resize an image in JavaScript, without using any external library. In our example, the action is to add the event listener for the resize hook with the addEventListener() method. The useEffect hook is used to perform an action when a component first renders, and when one or more specified dependencies change. The first is a variable that stores the state, and the second is a function that updates the state when it is called. 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. Window.removeEventListener('resize', handleWindowResize) Window.addEventListener('resize', handleWindowResize) Import from 'react' Ĭonst = useState(window.innerWidth)

Resize js