React-focus-point-image NPM

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}