@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
}