[Feature request] Support react components inside DivIcon component

[itscarlosrufo]

This is a feature request.

Current behavior:

Actually react-leaflet-div-icon component just accept DOM standard elements, as svg, html, etc, and a special case, react-leaflet popup component.

Example code:

const marker = [
    {lat: 49.8397, lng: 24.0297}
];
<DivIcon position={marker}>
  <svg>
    <circle cx="60" cy="60" r="50"/>
  </svg>
</DivIcon>

Expected behavior:

Thinking in component development and react architecture, I'd support to insert react components as content.

Example code:

const marker = [
    {lat: 49.8397, lng: 24.0297}
];
<DivIcon position={marker}>
  <SpecialIcon icon={icon} />
</DivIcon>

Currently, I'm working in this feature, at first sight, I got a possible solution getting DivIcon reference, searching native browser DOM element and setting html content into leaflet icon via own setter function.

I hope to create a PR with a tested development in these weeks. Thank you for your consideration.

[itscarlosrufo]

I just created a PR #10 with the proposal development, I hope that can help.

How I described above, the solution that I've implemented is just getting DivIcon reference, searching native browser DOM element and setting html content into leaflet icon via own setter function.

Warning: It's not a totally tested functionality, although to handle simple React Elements should work. I'll be waiting for bugs that can appear on it.

Thank you for your consideration.

[nik-john]

@swcarlosrj Do you have a work around for this that you might be using, while waiting for the PR to get accepted?

[itscarlosrufo]

@nik-john sorry for late response, I was using the PR #10 . As I said, to handle simple React Elements should work.

[tmcintire]

I would also like to see this as a feature implemented as I need to render react elements as Markers