diff --git a/README.md b/README.md index 58d3ca1..24bb089 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,7 @@ Its structure is similar to the HTML syntax of mapping: |**coords**|*array of number*|Coordinates delimiting the zone according to the specified shape: |required| |**active**|*string*|Enable/Disable highlighting|true| |**disabled**|*string*|Enable/Disable area listeners and highlighting|false| |**href**|*string*|Target link for a click in the zone (note that if you provide an onClick prop, `href` will be prevented)|undefined| +|**target**|*string*|_blank,_self|undefined| |**fillColor**|*string*|Fill color of the highlighted zone|rgba(255, 255, 255, 0.5)| |**strokeColor**|*string*|Border color of the highlighted zone|rgba(0, 0, 0, 0.5)| |**lineWidth**|*string*|Border thickness of the highlighted zone|1| diff --git a/src/ImageMapper.tsx b/src/ImageMapper.tsx index 4ca3148..c7c7f7d 100644 --- a/src/ImageMapper.tsx +++ b/src/ImageMapper.tsx @@ -295,6 +295,7 @@ const ImageMapper: React.FC = (props: ImageMapperProps) => { {...(area.preFillColor ? { className: 'img-mapper-area-highlighted' } : {})} key={area[areaKeyName] || index.toString()} shape={area.shape} + {...area.target?{target:area.target}:{}} coords={scaledCoords.join(',')} onMouseEnter={event => hoverOn(extendedArea, index, event)} onMouseLeave={event => hoverOff(extendedArea, index, event)} diff --git a/src/types.ts b/src/types.ts index 746b691..bcc98c9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,6 +11,7 @@ export interface MapAreas { active?: boolean; disabled?: boolean; href?: string; + target?: string; fillColor?: string; strokeColor?: string; lineWidth?: number;