@theforce/react/dist/index.mjs

React library for TheForce hand tracking

// src/hand-tracker-provider.tsx
import {
  createContext,
  useContext,
  useRef,
  useCallback,
  useState,
  useEffect
} from "react";
import { HandTracker } from "@theforce/core";
import { jsx } from "react/jsx-runtime";
var HandTrackerContext = createContext(null);
var HandTrackerProvider = ({
  children,
  config,
  debug
}) => {
  const [handLandmarks, setHandLandmarks] = useState([]);
  const [isTracking, setIsTracking] = useState(false);
  const trackerRef = useRef(null);
  const initialize = useCallback(
    async (customConfig) => {
      if (isTracking)
        return;
      while (!window.Hands) {
        console.log("Waiting for MediaPipe Hands to load...");
        await new Promise((resolve) => setTimeout(resolve, 100));
      }
      const finalConfig = { ...config, ...customConfig, debug };
      trackerRef.current = new HandTracker(finalConfig);
      trackerRef.current.onResults((results) => {
        setHandLandmarks(results.multiHandLandmarks || []);
      });
      await trackerRef.current.start();
      setIsTracking(true);
    },
    [config, isTracking, debug]
  );
  const stop = useCallback(async () => {
    if (!trackerRef.current || !isTracking)
      return;
    await trackerRef.current.stop();
    trackerRef.current = null;
    setIsTracking(false);
    setHandLandmarks([]);
  }, [isTracking]);
  useEffect(() => {
    return () => {
      if (trackerRef.current) {
        trackerRef.current.stop();
      }
    };
  }, []);
  const value = {
    handLandmarks,
    initialize,
    stop,
    isTracking
  };
  return /* @__PURE__ */ jsx(HandTrackerContext.Provider, { value, children });
};
var useHandTracker = () => {
  const context = useContext(HandTrackerContext);
  if (!context) {
    throw new Error("useHandTracker must be used within a HandTrackerProvider");
  }
  return context;
};
export {
  HandTrackerProvider,
  useHandTracker
};