Fullscreen control for react-leaflet

Downloads in past


3992.0.2a year ago7 years agoMinified + gzip package size for react-leaflet-fullscreen in KB


FullscreenControl for react-leaflet
Based on

Usage example

import React from "react";
import { render } from "react-dom";
import { MapContainer, TileLayer } from "react-leaflet";
import { FullscreenControl } from "react-leaflet-fullscreen";
import "react-leaflet-fullscreen/dist/styles.css";

const App = () => {
  return (
    <div id="map">
      <MapContainer center={[54.989, 73.369]} zoom={12} scrollWheelZoom={false}>
          attribution='© <a href="">OpenStreetMap</a> contributors'
        <FullscreenControl />

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

Component props

position: 'topleft' | 'topright' | 'bottomright' | 'bottomleft'
title: string, // title of the button, default Full Screen
titleCancel: string // title of the button when fullscreen is on, default Exit Full Screen
content: null | HTMLElement // content of the button, can be HTML, default null
forceSeparateButton: boolean, // force seperate button to detach from zoom buttons, default false
forcePseudoFullscreen: boolean, // force use of pseudo full screen even if full screen API is available, default false
fullscreenElement: boolean // Dom element to render in full screen, false by default, fallback to map._container