useRoute

import { useRoute } from 'gistda-sphere-react';

function RouteComponent() {
  const { addDestination, search, getDistance, getInterval, clear, isReady } = useRoute();

  const calculateRoute = () => {
    addDestination({ lon: 100.5018, lat: 13.7563 });
    addDestination({ lon: 98.9853, lat: 18.7883 });
    search();
  };

  return (
    <div>
      <button onClick={calculateRoute}>Calculate Route</button>
      <button onClick={clear}>Clear</button>
    </div>
  );
}

const { search, getDistance, getInterval, addDestination, clear } = useRoute({
  onRouteComplete() {
    console.log('Distance:', getDistance(true));
    console.log('Duration:', getInterval(true));
  },
  onRouteError(code) {
    console.error('Route error:', code);
  },
});

import { useRoute, type RouteGuideStep } from 'gistda-sphere-react';

function TurnByTurnRoute() {
  const [steps, setSteps] = useState<RouteGuideStep[]>([]);

  const { addDestination, search, getGuide } = useRoute({
    onRouteComplete() {
      const guide = getGuide();
      if (Array.isArray(guide)) {
        setSteps(guide as RouteGuideStep[]);
      }
    },
  });

  return (
    <div>
      <button onClick={() => {
        addDestination({ lon: 100.5018, lat: 13.7563 });
        addDestination({ lon: 98.9853, lat: 18.7883 });
        search();
      }}>
        Get Directions
      </button>
      <ol>
        {steps.map((step, i) => (
          <li key={i}>
            <strong>{step.instruction}</strong>
            <span> — {String(step.distance)}</span>
            {step.duration && <span> · {String(step.duration)}</span>}
          </li>
        ))}
      </ol>
    </div>
  );
}