is there someone who managed to make it working in react

[otiza]

is there a way to make it work in react?

[abewartech]

i used this on react

import './trackplayback/control.trackplayback';
import './trackplayback/leaflet.trackplayback';
import './trackplayback/control.playback.css';

const areEqual = (prevProps, nextProps) => {
return false;
};
const TrackPlay = React.memo((props) => {
const context = useLeafletContext();
const Options = {
clockOptions: {
speed: 9,
maxSpeed: 30,
},
trackPointOptions: {
isDraw: true,
useCanvas: true,
stroke: false,
color: '#ef0300',
fill: true,
fillColor: '#ef0300',
opacity: 0.5,
radius: 4,
},
trackLineOptions: {
isDraw: true,
stroke: true,
color: '#1C54E2',
weight: 2,
fill: false,
fillColor: '#000',
opacity: 0.5,
},
targetOptions: {
useImg: false,
width: 10,
height: 20,
},
};

// useEffect(() => {
const container = context.layerContainer || context.map;
const playback = L.trackplayback(
	props.data,
	// [JSON.parse(JSON.stringify(props.data))],
	// test,
	container,
	Options,
);
const trackplaybackControl = L.trackplaybackcontrol(playback, {
	position: 'bottomright',
});
// props.setTrackPlaybackControl(trackplaybackControl)
// props.setTrackPlaybackContainer(container)

// setContainerRef(container)
// setPlaybackControl(trackplaybackControl)
window.control = trackplaybackControl;
window.container = container;
trackplaybackControl.addTo(container);
// return () => {
// trackplaybackControl.remove();
// };

// setTimeout(() => {
// 	// trackplaybackControl.addTo(container);
// 	trackplaybackControl.remove();
// }, 5000);
// });

return null;

}, areEqual);

[otiza]

thank you

[bcaure]

please close this issue @otiza