react-focus-point-image

Focus is set on one object in an image. When the aspect ratio of the image container changes responsively, the focused part of the image will always be visible.

Demo

See working Demo here

Install

yarn

yarn add react-focus-point-image

npm

npm i react-focus-point-image

Example usage

import ReactFocusPointImage from 'react-focus-point-image';

<Wrapper style={{ width, height }}>
  <ReactFocusPointImage
    src="parrot.jpg"
    alt="A parrot"
    focusPoint={[61, 20]}
    animate
  />
</Wrapper>

Options

| Property | Description | | ---------- | ---------------------------------------- | | src | {string} src of the image | | alt? | {string} alt text | | focusPoint | {number[]} [x, y] 0-100 | | animate? | {boolean} when true image will fade in | | minWidth? | {number} | | minHeight? | {number} | | maxWidth? | {number} | | maxHeight? | {number} |