@wbe/use-responsive-image-data

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

Installation

$ 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);

  // ...
};

Parameters

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 |

Returned

The hook returns an IImage object:

{
  "url": number,
  "width": number,
  "height": number
}