FocalPoint

The FocalPoint is a TypeScript interface that represents the X and Y coordinates of the focal point in percent.

note

You can check the default value in Props section.

Interface

export interface FocalPoint {
  x: number;
  y: number;
}

Example of use

The following example shows how to use the FocalPoint interface in a TypeScript project.

import '@lemoncode/react-image-focal-point/style.css';
import {
  ImageFocalPoint,
  FocalPoint,
} from '@lemoncode/react-image-focal-point';

const App = () => {
  const [focalPoint, setFocalPoint] = useState<FocalPoint>({ x: 5, y: 10 });
  return (
    <ImageFocalPoint
      src="your-image-src"
      focalPoint={focalPoint}
      onChange={newFocalPoint => {
        setFocalPoint(newFocalPoint);
      }}
    />
  );
};