peacefulotter / react-leaflet-hotline

Create leaflet Polylines with colored gradients. Inspired from Leaflet.Hotline, with accurate colored gradients and Typescript support.

react-leaflet-hotline

Create colored gradient Polylines in react-leaflet

📝 Documentation, Examples and Live playground here 🎨

⚠️ This is not just a port from L.hotline, but mostly a rewrite to make gradient colors accurate. L.Hotline suffers from colors changing when moving around and zooming in and out - this package aims to fix it as well.

📝 Documentation, Examples and Live playground here 🎨

• Typescript support
• Both standalone Component and Hook available
• Highly customizable
• Supports all leaflet events (click, mouseover, mouseout, ...)
• Ultra lightweight: <10kB

react-leaflet-hotline's Issues

useCustomHotline doesn't update when `params` value changes

I'm using the useCustomHotline to draw a line. I have a params value that can change when some events are triggered by other components. But because the dependency array of the useEffect in useCustomHotline is empty, it will never recreate the Renderer.

Would changing the dependency array to [params] be an issue?

    useEffect( () => {
        const _renderer = new RendererClass(options, params);
        const _hotline = new HotPolylineClass( _renderer, data, getLat, getLng, getVal );

        _hotline.addTo(map);

        setRenderer(_renderer);
        setHotline(_hotline);
        
        return () => { 
            _renderer.remove()
            _hotline.remove()
        }
    }, [params])

I can create a PR if you need me to