Releases: Lemoncode/react-image-focal-point
Releases · Lemoncode/react-image-focal-point
@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 forreact
andreact-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.