Skip to main content

Core API

Interfaces and types#

ControlledLayer#

interface ControlledLayer {  addLayer(layer: Layer): void  removeLayer(layer: Layer): void}

LeafletContextInterface#

interface LeafletContextInterface {  map: Map  layerContainer?: ControlledLayer | LayerGroup  layersControl?: Control.Layers  overlayContainer?: Layer  pane?: string}

LeafletElement#

interface LeafletElement<T, C = any> {  instance: T  context: LeafletContextInterface  container?: C | null}

ElementHook#

type ElementHook<E, P> = (  props: P,  context: LeafletContextInterface,) => MutableRefObject<LeafletElement<E>>

DivOverlay#

type DivOverlay = Popup | Tooltip

SetOpenFunc#

type SetOpenFunc = (open: boolean) => void

DivOverlayLifecycleHook#

type DivOverlayLifecycleHook<E, P> = (  element: LeafletElement<E>,  context: LeafletContextInterface,  props: P,  setOpen: SetOpenFunc,) => void

DivOverlayHook#

type DivOverlayHook<E extends DivOverlay, P> = (  useElement: ElementHook<E, P>,  useLifecycle: DivOverlayLifecycleHook<E, P>,) => (props: P, setOpen: SetOpenFunc) => ReturnType<ElementHook<E, P>>

EventedProps#

interface EventedProps {  eventHandlers?: LeafletEventHandlerFnMap}

LayerProps#

interface LayerProps extends EventedProps, LayerOptions {}

PathProps#

interface PathProps extends EventedProps {  pathOptions?: PathOptions}

CircleMarkerProps#

interface CircleMarkerProps extends CircleMarkerOptions, PathProps {  center: LatLngExpression  children?: ReactNode}

MediaOverlayProps#

interface MediaOverlayProps extends ImageOverlayOptions, EventedProps {  bounds: LatLngBoundsExpression}

PropsWithChildren#

interface PropsWithChildren {  children?: ReactNode}

EventedWithChildrenProps#

interface EventedWithChildrenProps extends EventedProps, PropsWithChildren {}

PathWithChildrenProps#

interface PathWithChildrenProps extends PathProps, PropsWithChildren {}

Context#

LeafletContext#

React Context used by React Leaflet, implementing the LeafletContextInterface

LeafletProvider#

LeafletContext.Provider component.

useLeafletContext#

React Hook returning the LeafletContext. Calling this hook will throw an error if the context is not provided.

Hook factories#

The following functions return React hooks for specific purposes.

createElementHook#

Type parameters

  1. E: Leaflet's element class type
  2. P: the component's props
  3. C = any: the element's container, if relevant

Arguments

  1. createElement: (props: P, context: LeafletContextInterface) => LeafletElement<E>
  2. updateElement?: (instance: E, props: P, prevProps: P) => void

Returns ElementHook<E, P>

createControlHook#

Type parameters

  1. E extends Control: Leaflet's element class type
  2. P extends ControlOptions: the component's props

Arguments

  1. useElement: ElementHook<E, P>

Returns ElementHook<E, P>

createDivOverlayHook#

Type parameters

  1. E extends DivOverlay: Leaflet's element class type
  2. P extends EventedProps: the component's props

Arguments

  1. useElement: ElementHook<E, P>
  2. useLifecycle: DivOverlayLifecycleHook<E, P>

Returns ElementHook<E, P>

createLayerHook#

Type parameters

  1. E extends Layer: Leaflet's element class type
  2. P extends LayerProps: the component's props

Arguments

  1. useElement: ElementHook<E, P>

Returns ElementHook<E, P>

createPathHook#

Type parameters

  1. E extends FeatureGroup | Path: Leaflet's element class type
  2. P extends PathProps: the component's props

Arguments

  1. useElement: ElementHook<E, P>

Returns ElementHook<E, P>

Lifecycle hooks#

These hooks implement specific pieces of logic used by multiple components.

useEventHandlers#

This hook adds support for the eventHandlers prop, adding and removing event listeners as needed.

Arguments

  1. element: LeafletElement<Evented>
  2. eventHandlers: LeafletEventHandlerFnMap | null | undefined

Returns void

useLayerLifecycle#

This hook adds support for adding and removing the layer to/from its parent container or the map.

Arguments

  1. element: LeafletElement<Layer>
  2. context: LeafletContextInterface

Returns void

usePathOptions#

This hook adds support for the pathOptions prop, updating the layer as needed.

Arguments

  1. element: LeafletElement<FeatureGroup | Path>
  2. props: PathProps

Returns void

Update functions#

Shared update logic for different components.

updateCircle#

Updates the circle's center and radius if the props change.

Type parameters

  1. E extends CircleMarker: Leaflet's element class type
  2. P extends CircleMarkerProps: the component's props

Arguments

  1. layer: E
  2. props: P
  3. prevProps: P

Returns void

updateGridLayer#

Updates the layer's opacity and zIndex if the props change.

Type parameters

  1. E extends GridLayer: Leaflet's element class type
  2. P extends GridLayerOptions: the component's props

Arguments

  1. layer: E
  2. props: P
  3. prevProps: P

Returns void

updateMediaOverlay#

Updates the overlay's bounds, opacity and zIndex if the props change.

Type parameters

  1. E extends ImageOverlay | SVGOverlay | VideoOverlay: Leaflet's element class type
  2. P extends MediaOverlayProps: the component's props

Arguments

  1. overlay: E
  2. props: P
  3. prevProps: P

Returns void

DOM interactions#

Utility functions to change the class of a HTMLElement.

addClassName#

Arguments

  1. element: HTMLElement
  2. className: string

Returns void

removeClassName#

Arguments

  1. element: HTMLElement
  2. className: string

Returns void

updateClassName#

Arguments

  1. element?: HTMLElement
  2. prevClassName?: string
  3. nextClassName?: string

Returns void

Component factories#

These functions create components from the provided element hook.

createContainerComponent#

Type parameters

  1. E: Leaflet's element class type
  2. P extends PropsWithChildren: the component's props

Arguments

  1. useElement: ElementHook<E, P>

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createDivOverlayComponent#

Type parameters

  1. E extends DivOverlay: Leaflet's element class type
  2. P extends PropsWithChildren: the component's props

Arguments

  1. useElement: ReturnType<DivOverlayHook<E, P>>

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createLeafComponent#

Type parameters

  1. E: Leaflet's element class type
  2. P: the component's props

Arguments

  1. useElement: ElementHook<E, P>

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

High-level component factories#

These functions combine hooks and component factories to provide high-level factories for common component types.

createControlComponent#

Type parameters

  1. E extends Control: Leaflet's element class type
  2. P extends ControlOptions: the component's props

Arguments

  1. createInstance: (props: P) => E

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createLayerComponent#

Type parameters

  1. E extends Layer: Leaflet's element class type
  2. P extends EventedWithChildrenProps: the component's props

Arguments

  1. createElement: (props: P, context: LeafletContextInterface) => LeafletElement<E>
  2. updateElement?: (instance: E, props: P, prevProps: P) => void

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createOverlayComponent#

Type parameters

  1. E extends DivOverlay: Leaflet's element class type
  2. P extends EventedWithChildrenProps: the component's props

Arguments

  1. createElement: (props: P, context: LeafletContextInterface) => LeafletElement<E>
  2. useLifecycle: DivOverlayLifecycleHook<E, P>

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createPathComponent#

Type parameters

  1. E extends FeatureGroup | Path: Leaflet's element class type
  2. P extends PathWithChildrenProps: the component's props

Arguments

  1. createElement: (props: P, context: LeafletContextInterface) => LeafletElement<E>
  2. updateElement?: (instance: E, props: P, prevProps: P) => void

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createTileLayerComponent#

Type parameters

  1. E extends Layer: Leaflet's element class type
  2. P extends EventedProps: the component's props

Arguments

  1. createElement: (props: P, context: LeafletContextInterface) => LeafletElement<E>
  2. updateElement?: (instance: E, props: P, prevProps: P) => void

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>