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.
-
Let the user set the picture focal point just by visually dragging and dropping on top of the selected image.
-
You can use it as a controlled or uncontrolled component.
-
You can style the component at any component's level (check out the docs site CSS section).
We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
Lemoncode provides training services.
Basefactor, consultancy by Lemoncode provides consultancy and coaching services.
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend