Basic

Minimal example, here you can just drag the focal point and the example pictures focal point will be updated on real time.

How to apply this feature in your code

Import the library styles and the component:

app.tsx

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

const App = () => {
  return (

  );
}

Then use the component:

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={focalPoint => {
        // Add here your code to do whatever you want to when the user drags on the focal point
      }}
    />
  );
};

Live example

Codesandbox

Stackblitz