Webpack entry point

This example is the same as the basic example, but using webpack entry point in order to import the library (you can use the entry section of your webpack.config.js and add there the path to the library css file instead of having to add it in your main HTML / JS file in your app.

How to apply this feature in your code

Import the library component in your app:

app.tsx

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

Import the library styles in your webpack entry point:

webpack.config.js

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

Live example

Codesandbox

Stackblitz