Styled

This example shows how to override the standard component styles with your custom ones and apply them to the image focal point component.

How to apply this feature in your code

Import the library styles and the component. Use it with minimal properties:

import '@lemoncode/react-image-focal-point/style.css';
import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';

const App = () => {
  return (
    <ImageFocalPoint
      src="your-image-src"
      onChange={newFocalPoint => {
        // Add here your code to do whatever you want to when the user drags on the focal point
      }}
    />
  );
};

Create a css file and provide some styles to the root component:

app.css

.image-focal-point {
  width: 500px;
  height: 500px;
}

Use it:

import '@lemoncode/react-image-focal-point/style.css';
import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
+ import './app.css';

const App = () => {
  return (
    <ImageFocalPoint
+      className="image-focal-point"
       src="your-image-src"
       onChange={(newFocalPoint) => {
         // Add here your code to do whatever you want to when the user drags on the focal point
       }}
     />
  );
}

You can also customize the look & feel of the the image and the focal point by adding custom styles:

app.css

.image-focal-point {
  width: 500px;
  height: 500px;
}

+ .image {
+   border-radius: 10px;
+ }

+ .focal-point {
+   background-color: rgba(255, 0, 0, 0.4);
+ }

Use it:

import '@lemoncode/react-image-focal-point/style.css';
import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
import './app.css';

const App = () => {
  return (
    <ImageFocalPoint
-      className="image-focal-point"
+      classes={{
+        root: 'image-focal-point',
+        image: 'image',
+        focalPoint: 'focal-point',
+      }}
       src="your-image-src"
       onChange={(newFocalPoint) => {
         // Add here your code to do whatever you want to when the user drags on the focal point
       }}
     />
  );
}

Note: You can also provide the root styles directly to the classes object instead of using the className prop.

Live example

Codesandbox

Stackblitz