Controlled

In this example you can check how to set an initial focal point value (by default it is show centered, but you can override it).

How to apply this feature in your code

Import the library styles and the component. Use it with minimal properties:

app.tsx

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

const App = () => {
  return (
    <ImageFocalPoint
      src="your-image-src"
      onChange={newFocalPoint => {
        // Add here your code to do whatever you want to when the user drags on the focal point
      }}
    />
  );
};

Create a state to provide the initial focal point values and store the new ones:

app.tsx

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

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

Live example

Codesandbox

Stackblitz