https://github.com/chickencoding123/leaflet-react-fibers

A high performance react reconciler for [leafletjs](https://www.leafletjs.com)
https://github.com/chickencoding123/leaflet-react-fibers

leaflet leaflet-extention mutability react reconciler

Last synced: about 2 months ago
JSON representation

A high performance react reconciler for [leafletjs](https://www.leafletjs.com)

• Host: GitHub
• URL: https://github.com/chickencoding123/leaflet-react-fibers
• Owner: chickencoding123
• License: mit
• Created: 2021-12-24T14:53:50.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-19T23:56:30.000Z (about 1 year ago)
• Last Synced: 2025-03-05T19:40:31.918Z (2 months ago)
• Topics: leaflet, leaflet-extention, mutability, react, reconciler
• Language: TypeScript
• Homepage: https://chickencoding123.github.io/leaflet-react-fibers
• Size: 76.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        




leaflet-react-fibers


A high performance react library for _[leafletjs](https://www.leafletjs.com)_

[![npm](https://img.shields.io/npm/dm/leaflet-react-fibers?label=npm&logo=npm&color=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&logo=readthedocs)](https://chickencoding123.github.io/leaflet-react-fibers)



## How to use

```sh

npm i leaflet-react-fibers --save

# or

yarn add leaflet-react-fibers --save

```

```tsx

import { LeafletMap, L } from "leaflet-react-fibers"

const JustAMap = () => {

  return (

    

       { console.log('added a rectangle layer') }} />

    

  )

}

```

See [Docs](https://chickencoding123.github.io/leaflet-react-fibers) for various examples.

### JSX renderer

You must provide a JSX renderer when embedding HTML in `lfPopup` or `lfTooltip` otherwise their contents are ignored, this is by design:

>:information_source: You do NOT have to use `react-dom`, any JSX renderer will suffice. 

```tsx

import { LeafletMap, L } from "leaflet-react-fibers"

import ReactDOM from "react-dom"

const PopupInsideARectangle = () => {

  return (

    

        { console.log('added a rectangle layer') }}>

         { console.log('added an popup layer') }}>

          
Hello world!

        

      

    

  )

}

```


## Similar work

None of the libraries mentioned below provide mutability control out of the box and state management features.

1. [react-leaflet-fiber](https://github.com/umar-ahmed/react-leaflet-fiber) another fiber implementation.

2. [react-leaflet](https://github.com/PaulLeCam/react-leaflet) react wrapper for leaflet which comes with hooks.

## Known Issues

[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.

## Development

Clone this repository and simply run `npm run storybook` to get started.