# react-leaflet-dialog
> React wrapper of Leaflet.Dialog. A dialog modal window that is resizable and positionable on the map.
Latest version **2.0.1** (published 2019-02-05) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-leaflet-dialog
pnpm add react-leaflet-dialog
yarn add react-leaflet-dialog
bun add react-leaflet-dialog
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.0.1 |
| Published | 2019-02-05 |
| First published | 2018-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 969.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | M. Hasbie |
| Maintainers | m_hasbie |
| Keywords | react, leaflet, react-leaflet, leaflet-dialog, leaflet.dialog, dialog, react-leaflet-dialog |
## Links
- npm: https://www.npmjs.com/package/react-leaflet-dialog
- Repository: https://github.com/mhasbie/react-leaflet-dialog
- Homepage: https://github.com/mhasbie/react-leaflet-dialog#readme
- Issues: https://github.com/mhasbie/react-leaflet-dialog/issues
- npm.io page: https://npm.io/package/react-leaflet-dialog
## Dependencies (1)
- [leaflet-dialog](https://npm.io/package/leaflet-dialog.md) ^1.0.5
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.0.1 (latest) — 2019-02-05
- 2.0.0 — 2019-02-05
- 1.0.5 — 2018-08-27
- 1.0.4 — 2018-08-27
- 1.0.3 — 2018-08-27
- 1.0.2 — 2018-08-27
- 1.0.0 — 2018-08-27
## README
# react-leaflet-dialog
[](http://npm.im/react-leaflet-dialog)
[](https://github.com/mhasbie/react-leaflet-dialog)
[](https://travis-ci.org/mhasbie/react-leaflet-dialog)
[](https://david-dm.org/mhasbie/react-leaflet-dialog)
[](https://david-dm.org/mhasbie/react-leaflet-dialog?type=peer)
[](https://github.com/mhasbie/react-leaflet-dialog/issues)
[](http://npm-stat.com/charts.html?package=react-leaflet-dialog&from=2018-01-01)
[](http://opensource.org/licenses/MIT)
React wrapper of [Leaflet.Dialog](https://github.com/NBTSolutions/Leaflet.Dialog) for [react-leaflet](https://github.com/PaulLeCam/react-leaflet).
A dialog modal window that is resizable and positionable on the map.
*Tested with Leaflet 1.4.0 and React-Leaflet 1.9.1, React-Leaflet 2.2.0*
## Demos
| Version | Demo |
| --- | --- |
| react-leaflet@1.9.1 | [`CodePen`](https://codepen.io/m_hasbie/full/omePOP/) |
| react-leaflet@2.x | [`CodePen`](https://codepen.io/m_hasbie/full/gqxBKr/) |
## Installation
### Install via NPM
```bash
npm install react-leaflet-dialog --save
```
Include font-awesome css to your project.
```html
```
## Usage example for `react-leaflet` **v1**
```javascript
import { Map, TileLayer } from 'react-leaflet';
import Dialog from 'react-leaflet-dialog';
```
## Usage example for `react-leaflet` **v2**
```javascript
import { Map, TileLayer, withLeaflet } from 'react-leaflet';
import DialogDefault from 'react-leaflet-dialog';
// wrap `Dialog` component with `withLeaflet` HOC
const Dialog = withLeaflet(DialogDefault);
```
## Options
Any props passed to Dialog are passed down to Leaflet.Dialog.
Refer [Leaflet.Dialog options](https://github.com/NBTSolutions/Leaflet.Dialog#options) for a complete list of options supported.
| Property | Type | Default | Description
| --- | --- | --- | ---
| size | [Array][width, height] | [ 300, 300 ] | An array of the starting width and height values (in pixels).
| minSize | [Array][width, height] | [ 100, 100 ] | An array with the minimum resize width and height (in pixels).
| maxSize | [Array][width, height] | [ 350, 350 ] | An array with the maximum resize width and height (in pixels).
| anchor | [Array][top, left] | [ 250, 250 ] | The starting point anchor location (from the upper left) in pixels.
| position | [String] | 'topleft' | The leaflet control div to place the modal inside, as a starting reference point.
| initOpen | [Boolean] | true | Whether or not to initialize in an open state.
## Methods
| Method | Returns | Example | Description
| --- | --- | --- | ---
| open() | this | dialog.open(); | Opens the dialog window.
| close() | this | dialog.close(); | Closes the dialog window.
| destroy() | this | dialog.destroy(); | Removes the dialog box from the window.
| setLocation( [Array][top, left] anchor location ) | this | dialog.setLocation( [ 15, 15 ] ); | Move the dialog box to the specified pixel location ( Relative to the 'position' option )
| setSize( [Array][width, height] size ) | this | dialog.setSize( [ 150, 150 ] ); | Resize the dialog window to the specified width and height.
| setContent( [String | node] content ) | this | dialog.setContent("
Hello! Welcome to your nice new dialog box!
"); | Set new content for the dialog.
| lock() | this | dialog.lock(); | Hides all visible dialog window controls.
| unlock() | this | dialog.unlock(); | Re-instates all dialog window controls.
| freeze() | this | dialog.freeze(); | Hides all visible dialog window movement/sizing controls.
| unfreeze() | this | dialog.unfreeze(); | Re-instates all dialog window movement/sizing controls.
| hideClose() | this | dialog.hideClose(); | Hides the closing 'x'
| showClose() | this | dialog.showClose(); | Shows the closing 'x'
| hideResize() | this | dialog.hideResize(); | Hides the resizing symbol
| showResize() | this | dialog.showResize(); | Shows the resizing symbol
### Example
```javascript
...
openDialog() {
this.dialog.open();
}
closeDialog() {
this.dialog.close();
}
destroyDialog() {
this.dialog.destroy();
}
updateDialogContent() {
this.dialog.setContent("
This is the new dialog content.
");
}
render() {
return (
);
}
...
```
## Events
| Event | Data | Description
| --- | --- | ---
| onOpened | this | Fired when open() is called.
| onClosed | this | Fired when close() is called or when the 'x' is clicked.
| onDestroyed | this | Fired when destroy() is called.
| onLocked | this | Fired when lock() is called.
| onUnlocked | this | Fired when unlock() is called.
| onFrozen | this | Fired when freeze() is called.
| onUnfrozen | this | Fired when unfreeze() is called.
| onUpdated | this | Fired when contents are set or when added to the map.
| onResizeStart | this | Fired when the resize button is clicked.
| onResizing | this | Fired continuously as the resize button is dragged.
| onResizeEnd | this | Fired when the resize button click is released.
| onMoveStart | this | Fired when the move button is clicked.
| onMoving | this | Fired continuously as the move button is dragged.
| onMoveEnd | this | Fired when the move button click is released.
| onCloseHidden | this | Fired when hideClose() is called.
| onCloseShown | this | Fired when the showClose() is called.
| onResizeHidden | this | Fired when hideResize() is called.
| onResizeShown | this | Fired when the showResize() is called.
# Credits
Credits goes to [NBTSolutions](https://github.com/NBTSolutions) and all the [contributors](https://github.com/NBTSolutions/Leaflet.Dialog/graphs/contributors) for the original work.
# License
MIT License
---
_Source: https://npm.io/package/react-leaflet-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._