React Setup

Setting up

Install package

npm install streamthing

Environment variables

.env

REACT_APP_SERVER_REGION=us3
Server setup

You'll need to create your own server.

Server setup
Full example

Here is a full example app using React with Express server

src/App.tsx

import { useEffect, useState } from "react";
import { createClientStream, ClientStream } from "streamthing";

export default function App() {
  // Initialize state
  const [data, setData] = useState<string>("");

  useEffect(() => {
    let stream: ClientStream | null = null;

    // Create client stream
    (async () => {
      stream = await createClientStream(process.env.REACT_APP_SERVER_REGION);

      // Get token from server
      const res = await fetch("/api/get-token?id=" + stream.id);
      const { token } = await res.json();

      // Authenticate stream
      stream.authenticate(token);

      // Create listener
      stream.receive("keyboard-event", (message) => {
        setData(message);
      });
    })();

    window.onkeydown = async (e) => {
      await fetch("/send-event", {
        method: "POST",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify({
          event: "keyboard-event",
          message: e.key,
        }),
      });
    };

    // Cleanup
    return () => {
      stream?.disconnect();
    };
  }, []);

  return (
    <div>
      <p>{data}</p>
    </div>
  );
}