Framework Integration

Use one LiteP2P instance per page/app session. Connect on mount, disconnect on unmount, and keep handlers stable.

React

import { useEffect, useMemo } from 'react';
import { LiteP2P, PeerConfig } from '@litep2p/sdk';

export function useLiteP2P(appId: string) {
  const p2p = useMemo(() => new LiteP2P(new PeerConfig({ appId })), [appId]);

  useEffect(() => {
    let mounted = true;
    p2p.connect().catch(() => {});
    return () => {
      mounted = false;
      p2p.disconnect();
    };
  }, [p2p]);

  return p2p;
}

Next.js

• Only initialize on the client (avoid SSR).
• Use dynamic import or useEffect guards.

Vue

Use a plugin or composable with onMounted/onUnmounted.