This hook allow to return a specific IImage object depending of specific width value.

Usage no npm install needed!

<script type="module">
  import wbeUseResponsiveImageData from 'https://cdn.skypack.dev/@wbe/use-responsive-image-data';



This hook allow to get image object whose width is closest to the value provided in px.


$ npm install -s @wbe/use-responsive-image-data

How to use

Basic usage:

import useResponsiveImageData, { IImage } from "@wbe/use-responsive-image-data";

const thumbs: IImage[] = [
    url: "my/image/1.jpg",
    width: 640,
    height: 480
    url: "my/image/2.jpg",
    width: 1024,
    height: 800

const App = () => {
  // will return the first object of thumbs array
  // (640 is the up closest to 500)
  const responsiveImageData: IImage = useResponsiveImageData(thumbs, 500);

  // ...


pImages: IImage[], pWidth?: number

params type description default value
pImages IImage[] array of image object /
pWidth number with limit of image object we need (px) window.innerWidth


The hook returns an IImage object:

  "url": number,
  "width": number,
  "height": number