@lemoncode/react-image-focal-point@1.0.0

Major Changes

• #13 6154ffa Thanks @Nasdan! - Let the user set the picture focal point just by visually dragging and dropping on top of the selected image.

  Install React Image Focal Point using your favorite package manager like npm:

  npm install @lemoncode/react-image-focal-point
  

  or via yarn:

  yarn add @lemoncode/react-image-focal-point
  

  This library has peerDependencies listings for react and react-dom. You will need to install these packages in your project in order to use this library.

  Import the library styles and the component:

  import '@lemoncode/react-image-focal-point/style.css';
  import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
  
  const App = () => {
    return (
      // Your app code
    );
  };

  Then use the component:

  import '@lemoncode/react-image-focal-point/style.css';
  import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
  
  const App = () => {
    return (
      <ImageFocalPoint
        src="your-image-src" // Same src as <img> HTML element
        onChange={focalPoint => {
          // Add here your code to do whatever you want to when the user drags on the focal point
        }}
      />
    );
  };

  Check out our official documentation

  You'll find runnable examples in the docs site and in the examples folder.