{"_id":"@adamscybot/react-leaflet-component-marker","_rev":"6-4be533b4bf27faf73491c07c3d616993","name":"@adamscybot/react-leaflet-component-marker","dist-tags":{"latest":"2.0.3"},"versions":{"1.0.2":{"name":"@adamscybot/react-leaflet-component-marker","version":"1.0.2","keywords":["react","react-leaflet","leaflet"],"author":{"name":"adamscybot"},"license":"MIT","_id":"@adamscybot/react-leaflet-component-marker@1.0.2","maintainers":[{"name":"adamscybot","email":"adam@adam-thomas.co.uk"}],"homepage":"https://github.com/adamscybot/react-leaflet-component-marker#readme","bugs":{"url":"https://github.com/adamscybot/react-leaflet-component-marker/issues"},"dist":{"shasum":"d6b56222526df07b43f1f19510658eae5b9a0c55","tarball":"https://registry.npmjs.org/@adamscybot/react-leaflet-component-marker/-/react-leaflet-component-marker-1.0.2.tgz","fileCount":7,"integrity":"sha512-NEbTEkqtC4nOxoZCNeHdRU75xILExB8A+bKPhShCki1EcXLZvOTIWaM0RX7fQw2yHDUhwcC0lwHTVdkdor8qvg==","signatures":[{"sig":"MEYCIQDS/sFv85YTxp/hhPaTJM9vSUOYrmMNj/BNuEprV0raVQIhAKgsskI0MRrys45kqVBqtbAgb5vi9G4oqWXEmXVxDvHL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9533},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"b22b5ebccaca1d310262f3a6b193c64ec04936f8","release":{"branches":["main"]},"scripts":{"lint":"eslint './src/**/*.ts' './src/**/*.tsx'","test":"cypress run-ct --browser chrome","build":"tsc --project tsconfig.build.json","test:dev":"cypress open-ct --browser chrome"},"_npmUser":{"name":"adamscybot","email":"adam@adam-thomas.co.uk"},"repository":{"url":"git+https://github.com/adamscybot/react-leaflet-component-marker.git","type":"git"},"_npmVersion":"10.2.4","description":"A tiny wrapper for react-leaflet's component that allows you to use a React component as a marker, with working state, handlers, and access to parent contexts.","directories":{},"sideEffects":false,"_nodeVersion":"20.11.0","dependencies":{"react-is":"^18.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.5.2","react":"^18.2.0","eslint":"^8.56.0","cypress":"^13.6.4","leaflet":"^1.9.4","prettier":"^3.2.4","react-dom":"^18.2.0","typescript":"^5.3.3","@types/react":"^18.2.52","react-leaflet":"^4.2.1","@types/leaflet":"^1.9.8","@types/react-is":"^18.2.4","@types/react-dom":"^18.2.18","semantic-release":"^23.0.0","@react-leaflet/core":"^2.1.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","@vitejs/plugin-react-swc":"^3.6.0","@typescript-eslint/parser":"^6.20.0","@typescript-eslint/eslint-plugin":"^6.20.0"},"peerDependencies":{"react":"^18.0.0","leaflet":"^1.9.0","react-dom":"^18.0.0","react-leaflet":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-leaflet-component-marker_1.0.2_1706988870833_0.6728526302783426","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@adamscybot/react-leaflet-component-marker","version":"1.1.0","keywords":["react","react-leaflet","leaflet"],"author":{"name":"adamscybot"},"license":"MIT","_id":"@adamscybot/react-leaflet-component-marker@1.1.0","maintainers":[{"name":"adamscybot","email":"adam@adam-thomas.co.uk"}],"homepage":"https://github.com/adamscybot/react-leaflet-component-marker#readme","bugs":{"url":"https://github.com/adamscybot/react-leaflet-component-marker/issues"},"dist":{"shasum":"b25737c408e12d1644bfd3bdeeeefa03bca31cd5","tarball":"https://registry.npmjs.org/@adamscybot/react-leaflet-component-marker/-/react-leaflet-component-marker-1.1.0.tgz","fileCount":9,"integrity":"sha512-QIT+XSaCtD/UJHlrzeFz7dt9+0acO7c3Kau5iKavdA9E+60k/sUKc7m3LZhAOVenXlzTJnFBByEr9WX6N238Cg==","signatures":[{"sig":"MEUCIQCScPNxb4ng6H05+0BNKDy5o85bh3VQuaF2py4PwTRAAgIgFx7oTEims69/FNlfe/6pBPZuGL5RcQjRgxhOHyLim1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15319},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"561ff086d6657cb418d037e0beef00e17ba76b33","release":{"branches":["main"]},"scripts":{"lint":"eslint './src/**/*.ts' './src/**/*.tsx'","test":"cypress run-ct --browser chrome","build":"tsc --project tsconfig.build.json","test:dev":"cypress open-ct --browser chrome"},"_npmUser":{"name":"adamscybot","email":"adam@adam-thomas.co.uk"},"repository":{"url":"git+https://github.com/adamscybot/react-leaflet-component-marker.git","type":"git"},"_npmVersion":"10.2.4","description":"A tiny wrapper for react-leaflet's component that allows you to use a React component as a marker, with working state, handlers, and access to parent contexts.","directories":{},"sideEffects":false,"_nodeVersion":"20.11.0","dependencies":{"react-is":"^18.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.5.2","react":"^18.2.0","eslint":"^8.56.0","cypress":"^13.6.4","leaflet":"^1.9.4","prettier":"^3.2.4","react-dom":"^18.2.0","typescript":"^5.3.3","@types/react":"^18.2.52","react-leaflet":"^4.2.1","@types/leaflet":"^1.9.8","@types/react-is":"^18.2.4","@types/react-dom":"^18.2.18","semantic-release":"^23.0.0","@react-leaflet/core":"^2.1.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","@vitejs/plugin-react-swc":"^3.6.0","@typescript-eslint/parser":"^6.20.0","@typescript-eslint/eslint-plugin":"^6.20.0"},"peerDependencies":{"react":"^18.0.0","leaflet":"^1.9.0","react-dom":"^18.0.0","react-leaflet":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-leaflet-component-marker_1.1.0_1706997505296_0.570428526452166","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@adamscybot/react-leaflet-component-marker","version":"2.0.0","keywords":["react","react-leaflet","leaflet"],"author":{"name":"adamscybot"},"license":"MIT","_id":"@adamscybot/react-leaflet-component-marker@2.0.0","maintainers":[{"name":"adamscybot","email":"adam@adam-thomas.co.uk"}],"homepage":"https://github.com/adamscybot/react-leaflet-component-marker#readme","bugs":{"url":"https://github.com/adamscybot/react-leaflet-component-marker/issues"},"dist":{"shasum":"cc4e2111f35b83fe84f3b7a0daef442d2085f346","tarball":"https://registry.npmjs.org/@adamscybot/react-leaflet-component-marker/-/react-leaflet-component-marker-2.0.0.tgz","fileCount":11,"integrity":"sha512-JXi4T98eFfKvmwh2LZ9aK+UghVlU/UfGHXfvxUvWwP2C5/28zeBZhCZERIufcsvbz4cpsTAhGnODkrm0O7DOeA==","signatures":[{"sig":"MEYCIQDJ2WDWiQ9uBD2ZvTpCF5+vRZyvtxEGSOhZxhghuoAlXgIhAKtNaKBvBq+lzYgJp8uutHqpdf50cswA6cYO0bFjjV6J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22431},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"47ccffc45377abfe60559d9c14b034794a4c2dbf","release":{"branches":["main"]},"scripts":{"lint":"eslint './src/**/*.ts' './src/**/*.tsx'","test":"cypress run --component --browser chrome","build":"tsc --project tsconfig.build.json","test:dev":"cypress open --component --browser chrome"},"_npmUser":{"name":"adamscybot","email":"adam@adam-thomas.co.uk"},"repository":{"url":"git+https://github.com/adamscybot/react-leaflet-component-marker.git","type":"git"},"_npmVersion":"10.7.0","description":"A tiny wrapper for react-leaflet's component that allows you to use a React component as a marker, with working state, handlers, and access to parent contexts.","directories":{},"sideEffects":false,"_nodeVersion":"20.15.0","dependencies":{"react-is":"^18.0.0","type-fest":"^4.10.3","react-reverse-portal":"^2.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.5.2","react":"^18.2.0","eslint":"^8.56.0","cypress":"^13.6.4","leaflet":"^1.9.4","prettier":"^3.2.4","react-dom":"^18.2.0","typescript":"^5.3.3","@types/react":"^18.2.52","react-leaflet":"^4.2.1","@types/leaflet":"^1.9.8","@types/react-is":"^18.2.4","@types/react-dom":"^18.2.18","semantic-release":"^23.0.0","@react-leaflet/core":"^2.1.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","@vitejs/plugin-react-swc":"^3.6.0","@typescript-eslint/parser":"^6.20.0","@typescript-eslint/eslint-plugin":"^6.20.0"},"peerDependencies":{"react":"^18.0.0","leaflet":"^1.9.0","react-dom":"^18.0.0","react-leaflet":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-leaflet-component-marker_2.0.0_1720727088651_0.8683727665711696","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@adamscybot/react-leaflet-component-marker","version":"2.0.1","keywords":["react","react-leaflet","leaflet"],"author":{"name":"adamscybot"},"license":"MIT","_id":"@adamscybot/react-leaflet-component-marker@2.0.1","maintainers":[{"name":"adamscybot","email":"adam@adam-thomas.co.uk"}],"homepage":"https://github.com/adamscybot/react-leaflet-component-marker#readme","bugs":{"url":"https://github.com/adamscybot/react-leaflet-component-marker/issues"},"dist":{"shasum":"7faaa463631001827083d08fbae15c1bc41f0124","tarball":"https://registry.npmjs.org/@adamscybot/react-leaflet-component-marker/-/react-leaflet-component-marker-2.0.1.tgz","fileCount":11,"integrity":"sha512-gD0vR9X3TPiOhV/folikjqsO5Qd69ipkd8Ukg8Ot63o8yj9NRDxU3Dg3o6qnUFYD6mTqhx6LmZlvQms6KPZVYA==","signatures":[{"sig":"MEUCIQCBAT8QqgIKlLtJhAKkLNt2bjWq/q+IZNJAEgD/p5CxlAIgbjfvQSoTLOKK9gu6Uka7WmII0oo6bAk0cY4FacMcmP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22684},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"3a42474b0f5d49650e61c9117ca428d1f2fa6cdc","release":{"branches":["main"]},"scripts":{"lint":"eslint './src/**/*.ts' './src/**/*.tsx'","test":"cypress run --component --browser chrome","build":"tsc --project tsconfig.build.json","test:dev":"cypress open --component --browser chrome"},"_npmUser":{"name":"adamscybot","email":"adam@adam-thomas.co.uk"},"repository":{"url":"git+https://github.com/adamscybot/react-leaflet-component-marker.git","type":"git"},"_npmVersion":"10.8.1","description":"A tiny wrapper for react-leaflet's component that allows you to use a React component as a marker, with working state, handlers, and access to parent contexts.","directories":{},"sideEffects":false,"_nodeVersion":"20.16.0","dependencies":{"react-is":"^18.3.1","type-fest":"^4.25.0","react-reverse-portal":"^2.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","react":"^18.3.1","eslint":"^9.9.0","cypress":"^13.13.3","leaflet":"^1.9.4","prettier":"^3.3.3","react-dom":"^18.3.1","typescript":"^5.5.4","@types/react":"^18.3.4","react-leaflet":"^4.2.1","@types/leaflet":"^1.9.12","@types/react-is":"^18.3.0","@types/react-dom":"^18.3.0","semantic-release":"^24.1.0","typescript-eslint":"^8.2.0","@react-leaflet/core":"^2.1.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@vitejs/plugin-react-swc":"^3.7.0"},"peerDependencies":{"react":"^18.0.0","leaflet":"^1.9.0","react-dom":"^18.0.0","react-leaflet":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-leaflet-component-marker_2.0.1_1724438271496_0.9612008408792845","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"@adamscybot/react-leaflet-component-marker","version":"2.0.2","keywords":["react","react-leaflet","leaflet"],"author":{"name":"adamscybot"},"license":"MIT","_id":"@adamscybot/react-leaflet-component-marker@2.0.2","maintainers":[{"name":"adamscybot","email":"adam@adam-thomas.co.uk"}],"homepage":"https://github.com/adamscybot/react-leaflet-component-marker#readme","bugs":{"url":"https://github.com/adamscybot/react-leaflet-component-marker/issues"},"dist":{"shasum":"f76868e0d2fa7746ed9d6f2ac11c9517893cb4a3","tarball":"https://registry.npmjs.org/@adamscybot/react-leaflet-component-marker/-/react-leaflet-component-marker-2.0.2.tgz","fileCount":11,"integrity":"sha512-IfVp0cIlkFDjzP3sXhbaheHAvvWFWhhmUt96U+qJQ/yB0Ne9wQKh8+h+I94+txPADjSYFWx07Ooek6yrJZR7lg==","signatures":[{"sig":"MEQCIEFsmifiuoPBl9IPQAIuq+3tA/bvoeORHFLpkO4XvAdIAiBYGj6RJ57ViU1KpEnDetGZCCLW8GQnIcSkLCE8PlPTAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22733},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"ee3eb7ca5daff4be7a7978696e297b452daf0de5","release":{"branches":["main"]},"scripts":{"lint":"eslint './src/**/*.ts' './src/**/*.tsx'","test":"cypress run --component --browser chrome","build":"tsc --project tsconfig.build.json","test:dev":"cypress open --component --browser chrome"},"_npmUser":{"name":"adamscybot","email":"adam@adam-thomas.co.uk"},"repository":{"url":"git+https://github.com/adamscybot/react-leaflet-component-marker.git","type":"git"},"_npmVersion":"10.8.2","description":"A tiny wrapper for react-leaflet's component that allows you to use a React component as a marker, with working state, handlers, and access to parent contexts.","directories":{},"sideEffects":false,"_nodeVersion":"20.18.1","dependencies":{"react-is":"^18.3.1","type-fest":"^4.30.2","react-reverse-portal":"^2.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.11","react":"^19.0.0","eslint":"^9.17.0","cypress":"^13.17.0","leaflet":"^1.9.4","prettier":"^3.4.2","react-dom":"^19.0.0","typescript":"^5.7.2","@types/react":"^19.0.2","react-leaflet":"^5.0.0","@types/leaflet":"^1.9.15","@types/react-is":"^19.0.0","@types/react-dom":"^19.0.2","semantic-release":"^24.2.0","typescript-eslint":"^8.18.2","@react-leaflet/core":"^3.0.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@vitejs/plugin-react-swc":"^3.7.2"},"peerDependencies":{"react":">=18.0.0","leaflet":">=1.9.0","react-dom":">=18.0.0","react-leaflet":">=4.0.0","@react-leaflet/core":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-leaflet-component-marker_2.0.2_1734991980179_0.9771490887029557","host":"s3://npm-registry-packages-npm-production"}},"2.0.3":{"name":"@adamscybot/react-leaflet-component-marker","version":"2.0.3","description":"A tiny wrapper for react-leaflet's component that allows you to use a React component as a marker, with working state, handlers, and access to parent contexts.","author":{"name":"adamscybot"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/adamscybot/react-leaflet-component-marker.git"},"bugs":{"url":"https://github.com/adamscybot/react-leaflet-component-marker/issues"},"keywords":["react","react-leaflet","leaflet"],"type":"module","main":"dist/index.js","types":"dist/index.d.ts","sideEffects":false,"scripts":{"lint":"eslint './src/**/*.ts' './src/**/*.tsx'","build":"tsc --project tsconfig.build.json","test":"cypress run --component --browser chrome","test:dev":"cypress open --component --browser chrome"},"devDependencies":{"@react-leaflet/core":"^3.0.0","@types/leaflet":"^1.9.15","@types/react":"^19.0.2","@types/react-dom":"^19.0.2","@types/react-is":"^19.0.0","@vitejs/plugin-react-swc":"^3.7.2","cypress":"^14.1.0","eslint":"^9.17.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","leaflet":"^1.9.4","prettier":"^3.4.2","react":"^19.0.0","react-dom":"^19.0.0","react-leaflet":"^5.0.0","semantic-release":"^24.2.0","typescript":"^5.7.2","typescript-eslint":"^8.18.2","vite":"^5.4.11"},"peerDependencies":{"@react-leaflet/core":">=2.0.0","leaflet":">=1.9.0","react":">=18.0.0","react-dom":">=18.0.0","react-leaflet":">=4.0.0"},"dependencies":{"react-is":"^18.3.1","react-reverse-portal":"^2.2.0","type-fest":"^4.30.2"},"release":{"branches":["main"]},"publishConfig":{"access":"public"},"_id":"@adamscybot/react-leaflet-component-marker@2.0.3","gitHead":"67d95bd5f1c7406bfc75e56ff308c6c2c2ff7fe1","homepage":"https://github.com/adamscybot/react-leaflet-component-marker#readme","_nodeVersion":"20.18.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-6KU2b6SuUPmAULmAtiMAkvxjaBf9svQUkY+LedA9w3h9Yom4rTdvdztG/8ZSJPQopJjNB6wSLSKY99TWzqcZWA==","shasum":"4c5d6b305c9437a624ec1565239244bfc9237e69","tarball":"https://registry.npmjs.org/@adamscybot/react-leaflet-component-marker/-/react-leaflet-component-marker-2.0.3.tgz","fileCount":11,"unpackedSize":22732,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHRs1Oki54BqWy8y4zjKYgKVVWCerYkbTyKoaKcn5ihHAiEAwyB3gMac0fsvdmD9EFwhcr8uFuFUG3SVcdj4z/FxZ8g="}]},"_npmUser":{"name":"adamscybot","email":"adam@adam-thomas.co.uk"},"directories":{},"maintainers":[{"name":"adamscybot","email":"adam@adam-thomas.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-leaflet-component-marker_2.0.3_1741568805447_0.2995885348029781"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-03T19:34:30.738Z","modified":"2025-03-10T01:06:45.821Z","1.0.2":"2024-02-03T19:34:31.035Z","1.1.0":"2024-02-03T21:58:25.440Z","2.0.0":"2024-07-11T19:44:48.822Z","2.0.1":"2024-08-23T18:37:51.697Z","2.0.2":"2024-12-23T22:13:00.374Z","2.0.3":"2025-03-10T01:06:45.620Z"},"bugs":{"url":"https://github.com/adamscybot/react-leaflet-component-marker/issues"},"author":{"name":"adamscybot"},"license":"MIT","homepage":"https://github.com/adamscybot/react-leaflet-component-marker#readme","keywords":["react","react-leaflet","leaflet"],"repository":{"type":"git","url":"git+https://github.com/adamscybot/react-leaflet-component-marker.git"},"description":"A tiny wrapper for react-leaflet's component that allows you to use a React component as a marker, with working state, handlers, and access to parent contexts.","maintainers":[{"name":"adamscybot","email":"adam@adam-thomas.co.uk"}],"readme":"

\n

react-leaflet-component-marker

\n

\n

\n👉 DEMO\n

\n

\n📍 Use a React component as React Leaflet markers.
\n🔄 Familiar swap-in API that feels like React Leaflet.
\n✨ Can use state, context etc. It's a full component. No BS.
\n💪 It's strongly typed.\n

\n\n# What is it\n\nA tiny wrapper for [react-leaflet](https://react-leaflet.js.org/)'s `` component that allows you to use a React component as a marker, with **working state, handlers, and access to parent contexts**.\n\nThe approach this library uses differs from other approaches that use `renderToString` in that it instead uses React's [Portal](https://react.dev/reference/react-dom/createPortal) functionality to achieve the effect. That means the component is not static, but a full first-class component that can have its own state, event handlers & lifecycle.\n\nI struggled to find something that worked in a way where I could simply drop something in from a design system, and have all the context available such that it works, as well as all the interactions working as they should.\n\nMany existing packages exist but they use techniques that mean they are very limited.\n\n# Installation\n\nInstall using your projects package manager.\n\n**NPM**\n\n```bash\nnpm install --save @adamscybot/react-leaflet-component-marker\n```\n\n**Yarn**\n\n```bash\nyarn install --save @adamscybot/react-leaflet-component-marker\n```\n\n**PNPM**\n\n```bash\npnpm add @adamscybot/react-leaflet-component-marker\n```\n\n# Docs\n\n## Simple Usage\n\nInstead of importing `Marker` from `react-leaflet`, import `Marker` from `@adamscybot/react-leaflet-component-marker`.\n\nThe `icon` prop is extended to allow for a JSX element of your choosing. All other props are identical to the `react-leaflet` [Marker](https://react-leaflet.js.org/docs/api-components/#marker) API, but there is an additional prop called `componentIconOpts` for [Advanced Usage](#advanced-usage).\n\nThe `icon` prop can also accept all of the original types of icons that the underlying `react-leaflet` Marker accepts. Though there is no gain in using this library for this case, it may help if you want to just use this library in place of Marker universally.\n\n### Example\n\n```javascript\nimport React from 'react'\nimport { MapContainer, TileLayer } from 'react-leaflet'\nimport { Marker } from '@adamscybot/react-leaflet-component-marker'\nimport 'leaflet/dist/leaflet.css'\n\nconst MarkerIconExample = () => {\n return (\n <>\n \n \n \n )\n}\n\nconst CENTER = [51.505, -0.091]\nconst ZOOM = 13\nconst App = () => {\n return (\n \n \n } />\n \n )\n}\n```\n\n## Advanced Usage\n\nThe `componentIconOpts` prop can be passed, which is an object with additional options for more advanced use cases. Note, in the case where you are not passing a component to `icon`, these settings will be ignored.\n\nBelow is a list of properties this object can be provided.\n\n#### `layoutMode`\n\nThe `layoutMode` controls how the bounding box of the React component marker behaves. It accepts two options:\n\n- `fit-content` _(default)_. In this mode, the React component itself defines the dimensions of the marker. The component can shrink and expand at will. Logic internally to this library centers the component on its coordinates to match Leaflets default positioning; however, Leaflet itself is effectively no longer in control of this.\n- `fit-parent`. In this mode, the dimensions of the React component marker are bound by the `iconSize` passed to `componentIconOpts.rootDivOpts`. Leaflet is therefore in control of the dimensions and positioning. Component markers should use elements with 100% width & height to fill the available size if needed.\n\n#### `rootDivOpts`\n\n> [!NOTE]\n> Some options are not supported since they do not apply or make sense in the case of a React component marker. The unsupported options are `html`, `bgPos`, `shadowUrl`, `shadowSize`, `shadowAnchor`, `shadowRetinaUrl`, `iconUrl` and `iconRetinaUrl`.\n\nAn object containing properties from the supported subset of the underlying Leaflet [`divIcon`](https://leafletjs.com/reference.html#divicon) options, which this library uses as a containing wrapper.\n\nIf using `fit-parent`, you must set `iconSize` here.\n\n#### `disableScrollPropagation`\n\n`false` by default.\n\nIf set to `true`, panning/scrolling the map will not be possible \"through\" the component marker.\n\n#### `disableClickPropagation`\n\n`false` by default.\n\nIf set to `true`, clicking on the component marker will not be captured by the underlying map.\n\n#### `unusedOptsWarning`\n\n`true` by default.\n\nCan be set to `false` in order to not warn in console about cases where `componentIconOpts` was set but `icon` was not a React component.\n\n#### `unusedOptsWarning`\n\n`true` by default.\n\nCan be set to `false` in order to not warn in console about cases where the `layoutMode` was `fit-parent` but their was no `iconSize` defined in the `rootDivOpts`.\n","readmeFilename":"README.md"}