{"id":21289275,"url":"https://github.com/chickencoding123/leaflet-react-fibers","last_synced_at":"2026-01-01T22:05:19.979Z","repository":{"id":43654440,"uuid":"441491675","full_name":"chickencoding123/leaflet-react-fibers","owner":"chickencoding123","description":"A high performance react reconciler for [leafletjs](https://www.leafletjs.com)","archived":false,"fork":false,"pushed_at":"2024-03-19T23:56:30.000Z","size":80351,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T19:40:31.918Z","etag":null,"topics":["leaflet","leaflet-extention","mutability","react","reconciler"],"latest_commit_sha":null,"homepage":"https://chickencoding123.github.io/leaflet-react-fibers","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chickencoding123.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-24T14:53:50.000Z","updated_at":"2022-05-12T14:55:51.000Z","dependencies_parsed_at":"2024-10-19T11:21:10.497Z","dependency_job_id":"c86a832b-2591-4d84-bb22-9c7bae508366","html_url":"https://github.com/chickencoding123/leaflet-react-fibers","commit_stats":{"total_commits":36,"total_committers":4,"mean_commits":9.0,"dds":0.5833333333333333,"last_synced_commit":"bb40b23526676451b302d40cc38eb5e9746e94ce"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chickencoding123%2Fleaflet-react-fibers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chickencoding123%2Fleaflet-react-fibers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chickencoding123%2Fleaflet-react-fibers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chickencoding123%2Fleaflet-react-fibers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chickencoding123","download_url":"https://codeload.github.com/chickencoding123/leaflet-react-fibers/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243754009,"owners_count":20342537,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["leaflet","leaflet-extention","mutability","react","reconciler"],"created_at":"2024-11-21T12:37:57.397Z","updated_at":"2026-01-01T22:05:19.911Z","avatar_url":"https://github.com/chickencoding123.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"./stories/assets/leaflet-react-fibers.png\" style=\"width: 10rem; margin-bottom: 1rem\" alt=\"leaflet-react-fibers logo\" /\u003e\n\n\u003ch1\u003eleaflet-react-fibers\u003c/h1\u003e\n\nA high performance react library for _[leafletjs](https://www.leafletjs.com)_\n\n[![npm](https://img.shields.io/npm/dm/leaflet-react-fibers?label=npm\u0026logo=npm\u0026color=blue)](https://www.npmjs.com/package/leaflet-react-fibers) [![license](https://img.shields.io/npm/l/leaflet-react-fibers?color=blue)](https://github.com/chickencoding123/leaflet-react-fibers/blob/main/LICENSE) [![docs](https://img.shields.io/badge/demo%20and%20docs-blue?label=see\u0026logo=readthedocs)](https://chickencoding123.github.io/leaflet-react-fibers)\n\n\u003c/div\u003e\n\n## How to use\n```sh\nnpm i leaflet-react-fibers --save\n# or\nyarn add leaflet-react-fibers --save\n```\n```tsx\nimport { LeafletMap, L } from \"leaflet-react-fibers\"\n\nconst JustAMap = () =\u003e {\n  return (\n    \u003cLeafletMap options={{ crs: L.CRS.Simple }}\u003e\n      \u003clfRectangle bounds={[[50, 50], [150, 100]]} options={{ fillColor: 'black' }} add={() =\u003e { console.log('added a rectangle layer') }} /\u003e\n    \u003c/LeafletMap\u003e\n  )\n}\n```\nSee [Docs](https://chickencoding123.github.io/leaflet-react-fibers) for various examples.\n\n### JSX renderer\nYou must provide a JSX renderer when embedding HTML in `lfPopup` or `lfTooltip` otherwise their contents are ignored, this is by design:\n\u003e:information_source: You do NOT have to use `react-dom`, any JSX renderer will suffice. \n```tsx\nimport { LeafletMap, L } from \"leaflet-react-fibers\"\nimport ReactDOM from \"react-dom\"\n\nconst PopupInsideARectangle = () =\u003e {\n  return (\n    \u003cLeafletMap options={{ crs: L.CRS.Simple }} jsxRenderer={ReactDOM.render}\u003e\n       \u003clfRectangle bounds={[[50, 50], [150, 100]]} options={{ fillColor: 'black' }} add={() =\u003e { console.log('added a rectangle layer') }}\u003e\n        \u003clfPopup latlng={[100, 100]} add={() =\u003e { console.log('added an popup layer') }}\u003e\n          \u003cdiv\u003eHello world!\u003c/div\u003e\n        \u003c/lfPopup\u003e\n      \u003c/lfRectangle\u003e\n    \u003c/LeafletMap\u003e\n  )\n}\n```\n\n## Similar work\nNone of the libraries mentioned below provide mutability control out of the box and state management features.\n1. [react-leaflet-fiber](https://github.com/umar-ahmed/react-leaflet-fiber) another fiber implementation.\n2. [react-leaflet](https://github.com/PaulLeCam/react-leaflet) react wrapper for leaflet which comes with hooks.\n\n## Known Issues\n[x] Mutability control does not work at the moment. This is a feature of this library that allows a layer to be explicitly mutable or immutable using a `mutable` prop.\n\n## Development\nClone this repository and simply run `npm run storybook` to get started.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchickencoding123%2Fleaflet-react-fibers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchickencoding123%2Fleaflet-react-fibers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchickencoding123%2Fleaflet-react-fibers/lists"}