React-image-leaflet NPM

preview

npm GitHub package.json dynamic

A React component that adds pan and zoom features to images

DEMO

Live demo

Features

Pan & Zoom
Auto-Fit to parent containers
Provided with Type Difinitions

Usage

Install

$ npm i react-image-leaflet

then in your jsx or tsx ...

import React from 'react';
import ReactDOM from 'react-dom';

import PanZoom from 'react-image-leaflet';

const App = () => {
  const [url] = React.useState('https://source.unsplash.com/random');

  return (
    <div style={{ width: '80vw', height: '80vh' }}>
      <PanZoom
        url={url}
        attribution='<a target="_blank" href="https://source.unsplash.com/">source.unsplash.com</a>'
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

Prop	Type	Default
url	Image URL	REQUIRED
bgColor	string	'#ddd'
zIndex	number \| 'inherit'	'inherit'
doubleClickReset	boolean	false (overrides `doubleClickZoom`)
getFocus	boolean	false
attribution	string (The HTML text)	undefined

Props inherited from Leaflet

see leaflet's documents for more details ...

Prop	Type	Default
preferCanvas	boolean	false
attributionControl	boolean	true
zoomControl	boolean	true
zoomSnap	number	1
zoomDelta	number	1
boxZoom	boolean	true
doubleClickZoom	boolean \| 'center'	true
dragging	boolean	true
maxZoom	number	3
zoomAnimation	boolean	true
zoomAnimationThreshold	number	4
fadeAnimation	boolean	true
keyboard	boolean	true
keyboardPanDelta	number	80
scrollWheelZoom	boolean \| 'center'	true
wheelDebounceTime	number	40
wheelPxPerZoomLevel	number	60
tap	boolean	true
tapTolerance	number	15
touchZoom	boolean \| 'center'	true
bounceAtZoomLimits	boolean	true