ImageFocalPointProps

The ImageFocalPointProps is the TypeScript interface used by the ImageFocalPoint component.

note

You can check the default values in Props section.

Interface

export interface ImageFocalPointProps {
  src: string;
  onChange: (focalPoint: FocalPoint) => void;
  focalPoint?: FocalPoint;
  alt?: string;
  labels?: LabelProps;
  className?: string;
  classes?: ClassesProps;
}

Example of use

The goal of exporting this interface is to be able to use it in other components, for example as a wrapper. The following example shows how to use the ImageFocalPointProps interface in a TypeScript project.

wrapper.tsx

import React from 'react';
import {
  ImageFocalPoint,
  ImageFocalPointProps,
} from '@lemoncode/react-image-focal-point';

interface Props extends ImageFocalPointProps {
  // Whatever you want to add
  title: string;
}

const Wrapper: React.FC<Props> = props => {
  const { title, ...otherProps } = props;
  return (
    <>
      <h3>{title}</h3>
      <ImageFocalPoint {...otherProps} />
    </>
  );
};