ImageFocalPoint (Component)

The ImageFocalPoint component is the main file of the library. It is a wrapper of the HTML image element that allows you to drag and drop a focal point button on top of the image element.

Internal HTML structure

<div class="root">
  <button class="focalPoint"></button>
  <img class="image" />
</div>

Props

Name	Type	Default	Required	Description
src	string	-	✓	The image source attribute.
onChange	(focalPoint: FocalPoint) => void	-	✓	Callback function that will be called when the user clicks on the focal point button and moves the cursor over the image.
focalPoint	FocalPoint	{ x: 50, y: 50 }	-	Initial focal point value in percentage.
alt	string	-	-	The image alt attribute.
labels	LabelProps	{ focalPoint: 'Focal point'}	-	Labels to be used in the component.
className	string	-	-	CSS class name to be applied to the root element.
classes	ClassesProps	-	-	CSS class names to be applied to the component elements.

LabelProps

Name	Type	Default	Required	Description
focalPoint	string	Focal point	false	Label to be used in the focal point button.

ClassesProps

Name	Type	Default	Required	Description
root	string	-	false	CSS class name to be applied to the root element.
focalPoint	string	-	false	CSS class name to be applied to the focal point button.
image	string	-	false	CSS class name to be applied to the image element.