Stop Building Backends for Simple Data Handoffs: Meet React State Warp

Question

The "Cross-Device" Problem

Have you ever been building a web application—maybe a registration form or an admin panel—and hit this specific roadblock?

The user needs to upload a photo, scan a document, or sign a canvas using their phone, but they are currently working on their desktop.

Usually, the "engineering" solution to this is surprisingly heavy:

1. Build an API endpoint to receive the file.
2. Set up a database or S3 bucket to store it temporarily.
3. Force the user to log in on their mobile device.
4. Implement a WebSocket or Polling mechanism to update the desktop UI when the upload is done.

That is a lot of infrastructure for a simple 30-second interaction. I wanted a better way.

So, I built React State Warp.

What is React State Warp?

React State Warp is a lightweight React Hook that creates a secure, peer-to-peer (P2P) wormhole between devices.

It allows you to generate a QR code on one device (Host), scan it with another (Client), and instantly sync React State between them.

• Zero Backend: Powered by WebRTC (PeerJS). Data travels Device-to-Device.
• Zero Database: Nothing is stored on a server.
• Instant Sync: Text, JSON, and even Binary data sync in milliseconds.

The Magic: Syncing Files without a Server

The hardest part of P2P is usually handling binary data. Most libraries break when you try to send a JavaScript File object.

I implemented a custom serializer that automatically detects File, Blob, or Uint8Array in your state, converts them efficiently, chunks them if necessary, and reconstructs them on the receiving device as a valid File object.

This means you can do this:

//  On Mobile:
<input type="file" onChange={(e) => send({ avatar: e.target.files[0] })} />

//  On Desktop:
// 'data.avatar' instantly becomes a File object you can display!
<img src={URL.createObjectURL(data.avatar)} />

️ How to use it

It is designed to be a "Headless" hook, meaning you have full control over the UI.

1. Install
   `bash
   npm install react-state-warp peerjs
   `

2. Implement the Hook

   `tsx
   import { useStateWarp } from 'react-state-warp';
   import QRCode from 'react-qr-code';

   function App() {
   // Initialize state like standard useState
   const { data, send, connectionLink, status } = useStateWarp({

    text: '', 
    file: null 
   

   });

   return (

    <div className="card">
    <h1>Status: {status}</h1>
       
    {/* Inputs are automatically synced */}
    <input 
        value={data.text} 
        onChange={(e) => send({ ...data, text: e.target.value })} 
        placeholder="Type here..." 
    />
   
    {/* Show QR Code for the other device to join */}
    {connectionLink && (
        <div className="qr-box">
        <QRCode value={connectionLink} />
        <p>Scan to join!</p>
        </div>
    )}
    </div>
   

   );
   }
   `

️ Handling the "Real World" (NATs & Firewalls)

One of the biggest pain points with WebRTC is connecting devices that are on different networks (e.g., WiFi vs. 4G).

React State Warp comes pre-configured with public Google STUN servers. This ensures that in 95% of cases, the connection punches through NATs and Firewalls automatically without you needing to configure ICE servers manually.

Try the Demo

I included a complete "Identity Verification" playground in the repository. It simulates a real-world flow where a user starts a profile on Desktop and finishes verification on Mobile.

• Github Repo: https://github.com/Reza-kh80/react-state-warp

• NPM: https://www.npmjs.com/package/react-state-warp

I would love to hear your thoughts! If you find this useful or interesting, dropping a Star ⭐ on GitHub would mean the world to me.

Let me know what you think in the comments below!

react #javascript #opensource #webdev #webrtc