@galileocap/peer-mesh

Peer Mesh

A wrapper for PeerJS that makes reactive peer-to-peer connections easy using Zustand.

npm install @galileocap/peer-mesh

Documentation

Quick Start

Create and initialize a store

In peerStore.js

import { PeerStore } from '@galileocap/peer-mesh';

export default const usePeerStore = new PeerStore();
usePeerStore.init({ number: 0 });

Use your data

import { usePeerStore } from './store';
import { MY_PEER } from '@galileocap/peer-mesh';

function Peer({ peer }) {
  return <p>id: {peer._id}, number: {peer.number}</p>;
}

export default function App() {
  const myPeer = usePeerStore.usePeer(MY_PEER);

  return (
    <div id='App'>
      { myPeer
        ? <Peer peer={myPeer} />
        : <p>Loading...</p>
      }
    </div>
  );
}

Connect to other peers

NOTE: You can use multiple tabs to test the perspective of multiple peers at the same time.

import { useState } from 'react';
import { usePeerStore } from './store';
import { ALL_PEERS } from '@galileocap/peer-mesh';

function Peer({ peer }) {
  return <p>id: {peer._id}, number: {peer.number}</p>;
}

function Connect({ }) {
  const [ peerId, setPeerId ] = useState('');
  const onChangePeerId = (event) => setPeerId(event.target.value);
  const onConnect = () => usePeerStore.connectTo(peerId);

  return (
    <div>
      <input onChange={onChangePeerId} value={peerId} />
      <button onClick={onConnect}>Connect</button>
    </div>
  );
}


export default function App() {
  const allPeers = usePeerStore.usePeer(ALL_PEERS);

  return (
    <div id='App'>
      <Connect />
      {allPeers.map((peer, idx) => <Peer peer={peer} key={idx} />)}
    </div>
  );
}

Update you own peer's data

And see it update in everyone's screen.

import { useState } from 'react';
import { usePeerStore } from './store';
import { ALL_PEERS } from '@galileocap/peer-mesh';

function Peer({ peer }) {
  return <p>id: {peer._id}, number: {peer.number}</p>;
}

function Connect({ }) {
  const [ peerId, setPeerId ] = useState('');
  const onChangePeerId = (event) => setPeerId(event.target.value);
  const onConnect = () => usePeerStore.connectTo(peerId);

  return (
    <div>
      <input onChange={onChangePeerId} value={peerId} />
      <button onClick={onConnect}>Connect</button>
    </div>
  );
}

export default function App() {
  const allPeers = usePeerStore.usePeer(ALL_PEERS);
  const onIncrementMyNumber = () => {
    usePeerStore.sendUpdate((myPeer) => { myPeer.number++ });
  }

  return (
    <div id='App'>
      <Connect />
      <button onClick={onIncrementMyNumber}>Increment your number</button>
      {allPeers.map((peer, idx) => <Peer peer={peer} key={idx} />)}
    </div>
  );
}

Update the shared state

import { useState } from 'react';
import { usePeerStore } from './store';
import { ALL_PEERS } from '@galileocap/peer-mesh';

function Peer({ peer }) {
  return <p>id: {peer._id}, number: {peer.number}</p>;
}

function Connect({ }) {
  const [ peerId, setPeerId ] = useState('');
  const onChangePeerId = (event) => setPeerId(event.target.value);
  const onConnect = () => usePeerStore.connectTo(peerId);

  return (
    <div>
      <input onChange={onChangePeerId} value={peerId} />
      <button onClick={onConnect}>Connect</button>
    </div>
  );
}

export default function App() {
  const allPeers = usePeerStore.usePeer(ALL_PEERS);
  const onIncrementMyNumber = () => {
    usePeerStore.sendUpdate((myPeer) => { myPeer.number++ });
  }

  const sharedNumber = usePeerStore.useShared().number;
  const onIncrementSharedNumber = () => {
    usePeerStore.sharedUpdate((sharedState) => { sharedState.number++; });
  }

  return (
    <div id='App'>
      <Connect />
      <button onClick={onIncrementMyNumber}>Increment your number</button>
      <button onClick={onIncrementSharedNumber}>Increment shared number</button>
      <p>Shared number: {sharedNumber}</p>
      {allPeers.map((peer, idx) => <Peer peer={peer} key={idx} />)}
    </div>
  );
}