feat: export helper to help appropriately build image styles

src/components/TargetImage.tsx

@@ -1,6 +1,7 @@
 import { HTMLProps, MutableRefObject } from 'react';
 
 import { useTargetRef } from '..';
+import { getTargetImageStyle } from '../libHelpers/image';
 
 interface TargetImageProps extends Omit<HTMLProps<HTMLImageElement>, 'src'> {
   src: string;
@@ -10,23 +11,5 @@ export function TargetImage(props: TargetImageProps) {
   const { style, ...otherProps } = props;
   const ref = useTargetRef() as MutableRefObject<HTMLImageElement>;
 
-  return (
-    <img
-      ref={ref}
-      {...otherProps}
-      // Pointer events is disabled to prevent the image to be draggable
-      // block display so that the container fits the dimensions of the image
-      style={{
-        display: 'block',
-        pointerEvents: 'none',
-        imageRendering: 'pixelated',
-        // Revert any global css rules that can influence the width and height of the image
-        // e.g. tailwindcss's preflight sets max-width: 100% on any img tag
-        // The width and height of the target should be their natural values for react-roi to work as expected
-        maxWidth: 'initial',
-        maxHeight: 'initial',
-        ...style,
-      }}
-    />
-  );
+  return <img ref={ref} {...otherProps} style={getTargetImageStyle(style)} />;
 }

src/index.ts

@@ -12,3 +12,5 @@ export * from './hooks/useActions';
 export * from './hooks/useCommittedRois';
 export * from './hooks/useRoiState';
 export * from './hooks/useTargetRef';
+
+export * from './libHelpers/image';

src/libHelpers/image.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+
+/**
+ * Get img style properties to ensure proper rendering within react-roi
+ * @param style
+ */
+export function getTargetImageStyle(style?: CSSProperties): CSSProperties {
+  return {
+    // block display so that the container fits the dimensions of the image
+    display: 'block',
+    // Pointer events is disabled to prevent the image to be draggable
+    pointerEvents: 'none',
+    // Revert any global css rules that can influence the width and height of the image
+    // e.g. tailwindcss's preflight sets max-width: 100% on any img tag
+    // The width and height of the target should be their natural values for react-roi to work as expected
+    maxWidth: 'initial',
+    maxHeight: 'initial',
+    ...style,
+  };
+}