Navigator Prefabricating Marinates

    react-img-mapper-extended
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    React Img Mapper Extended

    React Component to highlight interactive zones in images

    This repository is based on react-img-mapper but with some enhancements

    1. Promise to be maintained this repository        
    2. Built in TypeScript
    3. Decreased size of bundled
    4. Awesome Documentation        
    5. Selected area will stay highlighted ( Single & Multiple ) with toggle and reset feature
    6. New Properties: Natural Dimensions, RerenderProps       
    7. Image Reference in Width, Height and onLoad function to access image properties  
    8. Responsive Image Mapper   
    9. Compatible with Next.js        
    

    Installation

    Package: react-img-mapper-extended

    NPM

    npm install react-img-mapper-extended --save        
    

    Yarn

    yarn add react-img-mapper-extended
    

    Demo & Examples

    Live demo: demo

    Then open localhost:3000 in a browser.

    If you want to change something and want to make a build file, you just need to run npm run build

    Usage

    Import the component as you normally do, and add it wherever you like in your JSX views as below:

    import React from 'react';
    import ImageMapper from 'react-img-mapper';
    
    const Mapper = props => {
      const URL = 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.jpg';
      const MAP = {
        name: 'my-map',
        // GET JSON FROM BELOW URL AS AN EXAMPLE
        areas: 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.json',
      };
      
      return <ImageMapper src={URL} map={MAP} />
    }
    
    export default Mapper;

    Properties

    Props Type Description Default
    src string Image source url required
    map string Mapping description { name: generated, areas: [ ] }
    containerRef ref help to reset selected highlighted area null
    areaKeyName string default unique key name ( required for stayHighlighted ) id
    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 number Border thickness of the highlighted zone 1
    width number | func Image width, in function you will get image reference object 0
    height number | func Image height, in function you will get image reference object 0
    active bool Enable/Disable highlighting true
    disabled bool Enable/Disable area listeners and highlighting false
    imgWidth number Original image width 0
    natural bool Give the original dimensions ( height & width ) to canvas and image wrapper false
    stayHighlighted bool You can see the highlighted area after clicking on the particular area false
    stayMultiHighlighted bool You can see the multiple highlighted area after clicking on the particular area false
    toggleHighlighted bool You can toggle selected highlighted area false
    rerenderProps array specify rerenderProps property, if you want to rerender your map with different property []
    responsive bool responsive map in all resolution ( for enable it you need to specify parentWidth ) false
    parentWidth number parent max width for responsive 0

    Properties Callback

    Props callbacks Called on signature
    onLoad Image loading and canvas initialization completed (imageRef: obj, parentDimensions: { width, height }): void
    onClick Click on a zone in image (area: obj, index: num, event): void
    onMouseEnter Hovering a zone in image (area: obj, index: num, event): void
    onMouseLeave Leaving a zone in image (area: obj, index: num, event): void
    onMouseMove Moving mouse on a zone in image (area: obj, index: num, event): void
    onMouseDown Clicks any button of the mouse on a zone in image (area: obj, index: num, event): void
    onMouseUp Releases left click of the mouse on a zone in image (area: obj, index: num, event): void
    onTouchStart Start to touch the zone in image (area: obj, index: num, event): void
    onTouchEnd Releases touch from the zone in image (area: obj, index: num, event): void
    onImageClick Click outside of a zone in image (event): void
    onImageMouseMove Moving mouse on the image itself (event): void

    Methods

    Method Description
    clearHighlightedArea Clear all selected highlighted area from your map

    Map Properties

    A map is an object describing highlighted areas in the image.

    Its structure is similar to the HTML syntax of mapping:

    • map: (object) Object to describe highlighted zones
      • name: (string) Name of the map, used to bind to the image.
      • areas: (array) Array of area objects - area: (object) Shaped like below :
    Property Type Description Default
    id string Uniquely identify an area. An index in an array is used if this value is not provided. You can set it with areaKeyName property index
    shape string Either rect, circle or poly required
    coords array of number Coordinates delimiting the zone according to the specified shape:
    • rect: top-left-X,top-left-Y,bottom-right-X,bottom-right-Y
    • circle: center-X,center-Y,radius
    • poly: Every point in the polygon path as point-X,point-Y,...
    required
    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
    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
    preFillColor string Pre filled color of the highlighted zone undefined

    When received from an event handler, an area is extended with the following properties:

    Property type Description
    scaledCoords array of number Scaled coordinates
    center array of number Coordinates positioning the center or centroid of the area: [X, Y]

    License

    Distributed with an MIT License. See LICENSE.txt for more details!

    Copyright (c) 2021 Juan Sebastián Díaz

    Install

    npm i react-img-mapper-extended

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    36 kB

    Total Files

    17

    Last publish

    Collaborators

    • juansedo