Skip to main content

Getting Started

Live demo​

You can try this live demo in Codesandbox or StackBlitz.

Installation​

Install React Image Focal Point using your favorite package manager:

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

Quickstart​

Import the library styles and the component:

app.jsx
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:

app.jsx
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
      }}
    />
  );
};
tip

As additional step, you can import the component styles in your bundler configuration file (e.g. webpack.config.js).

webpack.config.js
module.exports = {
  // ...
  entry: {
    // ...
    vendorStyles: ['@lemoncode/react-image-focal-point/style.css'],
  },
  // ...
};

And remove the import from the component file:

app.jsx
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
      }}
    />
  );
};

Here you have a Webpack entry point example.

Last updated on