Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript support #8

Closed
JeffinJ opened this issue Mar 12, 2022 · 8 comments
Closed

TypeScript support #8

JeffinJ opened this issue Mar 12, 2022 · 8 comments
Labels
need more info Provide more information or some reproduction code

Comments

@JeffinJ
Copy link

JeffinJ commented Mar 12, 2022

JSX element class does not support attributes because it does not have a 'props' property.
'LeafletTrackingMarker' cannot be used as a JSX component.
Its instance type 'LeafletTrackingMarker' is not a valid JSX element.

@alexandra-c
Copy link
Owner

Can you please add a reproduction sample, maybe in SandBox?
Also I encourage everyone to contribute however they can, if you know how to fix this issue you can create a pull request and become a contributor 😊.
Thank you!

@alexandra-c alexandra-c added the need more info Provide more information or some reproduction code label Apr 5, 2022
@GabrielMil
Copy link

Hello there, I'm having the same problem. Is it possible to give please an example of how to use this package with react-ts.
How to create the .tsx file with the LeafletTrackingMarker.
Thanks.

BTW, does it matter if I'm using react-leaflet 4.0.1?

@alexandra-c
Copy link
Owner

Hello,
I'm working on this issue, I'm not sure how to make it compatible with ts. I wrote this library back when I didn't know typescript that much, I'm thinking about rewriting it with typescript now, which will also fix this issue and will also improve the code and build quality.
If you have any ideas I'm open to suggestions.

I'm also using LTS version of react-leaflet, 4.0.1 works just fine for me. 😊

Thanks 😊

@GabrielMil
Copy link

Nice to hear that, I wish you good luck and I'll stay tuned!
I wish I could help but I'm still learning typescript :(
Keep up the great work!

@tomszafr
Copy link
Contributor

Hi, thought I might help with the types. Here's the PR.
LeafletTrackingMarkerElement might be useful when using refs:

import { LeafletTrackingMarker, LeafletTrackingMarkerElement } from "react-leaflet-tracking-marker";
(...)
const markerRef = useRef<LeafletTrackingMarkerElement>(null);
(...)
<LeafletTrackingMarker ref={markerRef} />

@alexandra-c
Copy link
Owner

Thank you for your contribution @tomszafr!
Does your PR fixes the TypeScript support issue?

I'm working on rewriting the whole thing with TypeScript, react-leaflet 4 and react 18...but I got stuck fixing a 'useContext' react hook error... I'm going to push my current changes in a separate branch if anyone is interested and can help me, it would be hugely appreciated 😁

@paveltretyakovru
Copy link
Contributor

Aloha :)
With previous version of types I can't use children property with the wonderful component.
Current changes extend react-leaflet marker properties to supporting children property for using popup (for example) with the component.
Please, look at the Pull Request
And thank so much for the library, you have saved my time!

image

@alexandra-c
Copy link
Owner

Hello, @paveltretyakovru! Thank you for contributing, I wish to fully rewrite it with typescript but unfortunately my time is so limited.... I'm so glad people are contributing though. Thanks ! 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
need more info Provide more information or some reproduction code
Projects
None yet
Development

No branches or pull requests

5 participants