feat: containerProps, imgProps, canvasProps, mapProps and areaProps a…

…dded and resolved #83
img-mapper · Jan 26, 2025 · 132d299 · 132d299
1 parent d52e7d8
commit 132d299
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-img-mapper",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.8",
   "description": "React Component to highlight interactive zones in images",
   "keywords": [
     "react",

diff --git a/src/ImageMapper.tsx b/src/ImageMapper.tsx
@@ -54,6 +54,11 @@ const ImageMapper: FC<ImageMapperPropsWithRef> = ({ ref, ...props }) => {
     natural,
     responsive,
     parentWidth,
+    containerProps,
+    imgProps,
+    canvasProps,
+    mapProps,
+    areaProps,
 
     onChange,
     onImageClick,
@@ -261,9 +266,16 @@ const ImageMapper: FC<ImageMapperPropsWithRef> = ({ ref, ...props }) => {
 
       return (
         <area
-          {...(preFillColor ? { className: 'img-mapper-area-highlighted' } : {})}
+          alt="map"
+          {...areaProps}
+          className={[
+            'img-mapper-area',
+            ...(preFillColor ? ['img-mapper-area-highlighted'] : []),
+            ...(areaProps?.className ? [areaProps.className] : []),
+          ].join(' ')}
           key={area[areaKeyName] ?? index.toString()}
-          shape={shape}
+          href={href ?? areaProps?.href}
+          shape={shape ?? areaProps?.shape}
           coords={scaledCoords.join(',')}
           onMouseEnter={mouseEnter({ area, index }, { onMouseEnter, cb: handleMouseEnter })}
           onMouseLeave={mouseLeave({ area, index }, { onMouseLeave, cb: handleMouseLeave })}
@@ -273,27 +285,52 @@ const ImageMapper: FC<ImageMapperPropsWithRef> = ({ ref, ...props }) => {
           onTouchStart={touchStart({ area, index }, { onTouchStart })}
           onTouchEnd={touchEnd({ area, index }, { onTouchEnd })}
           onClick={click({ area, index }, { onClick, cb: handleClick })}
-          href={href}
-          alt="map"
         />
       );
     });
 
   return (
-    <div ref={containerRef} id="img-mapper" style={styles.container}>
+    <div
+      {...containerProps}
+      ref={containerRef}
+      id="img-mapper"
+      style={{ ...containerProps?.style, ...styles.container }}
+    >
       <img
-        ref={img}
         role="presentation"
-        className="img-mapper-img"
-        style={{ ...styles.img(responsive), ...(!isRendered ? { display: 'none' } : null) }}
+        alt="map"
+        {...imgProps}
+        ref={img}
         src={src}
         useMap={`#${map.name}`}
-        alt="map"
+        className={['img-mapper-img', ...(imgProps?.className ? [imgProps.className] : [])].join(
+          ' '
+        )}
+        style={{
+          ...imgProps?.style,
+          ...styles.img(responsive),
+          ...(!isRendered ? { display: 'none' } : null),
+        }}
         onClick={imageClick({ onImageClick })}
         onMouseMove={imageMouseMove({ onImageMouseMove })}
       />
-      <canvas ref={canvas} className="img-mapper-canvas" style={styles.canvas} />
-      <map className="img-mapper-map" name={map.name} style={styles.map(onClick)}>
+      <canvas
+        {...canvasProps}
+        ref={canvas}
+        className={[
+          'img-mapper-canvas',
+          ...(canvasProps?.className ? [canvasProps.className] : []),
+        ].join(' ')}
+        style={{ ...canvasProps?.style, ...styles.canvas }}
+      />
+      <map
+        {...mapProps}
+        className={['img-mapper-map', ...(mapProps?.className ? [mapProps.className] : [])].join(
+          ' '
+        )}
+        name={map.name}
+        style={{ ...mapProps?.style, ...styles.map(onClick) }}
+      >
         {isRendered && !disabled && renderAreas()}
       </map>
     </div>

diff --git a/src/helpers/constants.ts b/src/helpers/constants.ts
@@ -34,6 +34,11 @@ const imageMapperDefaultProps: ImageMapperDefaultProps = {
   natural: false,
   responsive: false,
   parentWidth: 0,
+  containerProps: null,
+  imgProps: null,
+  canvasProps: null,
+  mapProps: null,
+  areaProps: null,
 
   onChange: null,
   onImageClick: null,

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,5 +1,5 @@
 import type { ConditionalKeys, NoUndefinedField } from '@/types/lib.type';
-import type { MouseEvent, TouchEvent as ReactTouchEvent, Ref } from 'react';
+import type { HTMLProps, MouseEvent, TouchEvent as ReactTouchEvent, Ref } from 'react';
 
 export interface Refs {
   containerRef: HTMLDivElement | null;
@@ -48,6 +48,27 @@ export interface WidthHeight {
 
 export type Dimension = number | ((event: HTMLImageElement) => number);
 
+export type ContainerProps = Omit<HTMLProps<HTMLDivElement>, 'ref' | 'id'> | null;
+export type ImgProps = Omit<
+  HTMLProps<HTMLImageElement>,
+  'ref' | 'src' | 'useMap' | 'onClick' | 'onMouseMove'
+> | null;
+export type CanvasProps = Omit<HTMLProps<HTMLCanvasElement>, 'ref'> | null;
+export type MapProps = Omit<HTMLProps<HTMLMapElement>, 'name'> | null;
+export type AreaProps = Omit<
+  HTMLProps<HTMLAreaElement>,
+  | 'key'
+  | 'coords'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseMove'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onTouchStart'
+  | 'onTouchEnd'
+  | 'onClick'
+> | null;
+
 export type TouchEvent = ReactTouchEvent<HTMLAreaElement>;
 export type AreaEvent = MouseEvent<HTMLAreaElement>;
 export type ImageEvent = MouseEvent<HTMLImageElement>;
@@ -74,6 +95,11 @@ export interface ImageMapperProps {
   natural?: boolean;
   responsive?: boolean;
   parentWidth?: number;
+  containerProps?: ContainerProps;
+  imgProps?: ImgProps;
+  canvasProps?: CanvasProps;
+  mapProps?: MapProps;
+  areaProps?: AreaProps;
 
   onChange?: ChangeEventHandler;
   onImageClick?: ImageEventHandler;