National Park of Minnesota

    @jacobsdigitalfactory/react-image-hotspots

    1.7.2 • Public • Published

    react-image-hotspots

    React component for rendering images with zoom controls and hotspots.

    Live demo

    Install

    Install from npm and include it in your project build process:

    npm install react-image-hotspots --save
    

    Or install from Yarn running:

    yarn add react-image-hotspots
    

    Usage

    import ImageHotspots from 'react-image-hotspots'
    
    <ImageHotspots
      src='https://raw.githubusercontent.com/filipecorrea/react-image-hotspots/master/src/landscape.jpg'
      alt='Sample image'
      hotspots={
        [
          { x: 10, y: 30, content: <span>Hotspot 1</span> },
          { x: 40, y: 70, content: <span>Hotspot 2</span> },
          { x: 80, y: 30, content: <span>Hotspot 2</span> }
        ]
      }
    />

    Component properties

    Props Type Default Description
    src String, required Image source
    alt String, optional Image alternative info
    hideFullscreenControl Boolean, optional false Hide fullscreen control
    hideZoomControls Boolean, optional false Hide zoom controls
    hideMinimap Boolean, optional false Hide minimap
    hotspots Array of objects, optional [] Hotspots
    background String, optional Container background color

    If image size is smaller than the container size, zoom controls and minimap will be hidden.

    Hotspot properties

    Props Type Default Description
    x Number, required Percentage vertical position
    y Number, required Percentage horizontal position
    content React or HTML element, required Hotspot content

    Development

    Prerequisites

    Test project running:

    npm test
    

    Run project running:

    npm start
    

    Build project running:

    npm run build
    

    Install

    npm i @jacobsdigitalfactory/react-image-hotspots

    DownloadsWeekly Downloads

    9

    Version

    1.7.2

    License

    MIT

    Unpacked Size

    106 kB

    Total Files

    7

    Last publish

    Collaborators

    • penguinofwar