React Image Focal Point
Let the user set the picture focal point just by visually dragging and dropping on top of the selected image.
Live Demo
Table of Contents
Installation
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.
Quickstart
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
}}
/>
);
};
Docs
Check out our official documentation
Examples
You'll find runnable examples in the docs site and in the examples folder.
Key Features
-
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).
About Lemoncode + Basefactor
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