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
• Quickstart
• Docs
• Examples
• Key Features

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