@yomo/react-cursor-chat

@yomo/react-cursor-chat

🧬 Introduction

A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere based on Presencejs.

• Press / to bring up the input box

🤹🏻‍♀️ Quick Start

Installation

by npm:

$ npm i --save @yomo/react-cursor-chat @yomo/presence

by pnpm:

$ pnpm add @yomo/react-cursor-chat @yomo/presence

Integrate to your project

create .env with:

NEXT_PUBLIC_PRESENCE_URL=https://lo.yomo.dev:8443/v1
NEXT_PUBLIC_PRESENCE_PUBLIC_KEY=YOUR_PK

If you use nextjs, you can use this example:

"use client";

import { createPresence, IPresence } from "@yomo/presence";
import CursorChat from "@yomo/react-cursor-chat";
import "@yomo/react-cursor-chat/dist/style.css";
import { useEffect, useState } from "react";

const App = () => {
  const user = {
    id: Math.random().toString(36).substring(7), // random id (e.g. 5b3f1e)
    name: "Peter Parker",
    avatar: "https://i.pravatar.cc/150?img=3",
  };
  const [presence, setPresence] = useState<Promise<IPresence> | null>(null);
  useEffect(() => {
    (async () => {
      let url =
        process.env.NEXT_PUBLIC_PRESENCE_URL || "https://lo.yomo.dev:8443/v1";
      const presence = createPresence(url, {
        publicKey: process.env.NEXT_PUBLIC_PRESENCE_PUBLIC_KEY,
        id: user.id,
        autoDowngrade: true, // downgrade to websocket automatically if webTransport not work
      });
      setPresence(presence);
    })();
  }, []);

  if (!presence) return <div>Loading...</div>;

  return (
    <div>
      <CursorChat
        presence={presence}
        id={user.id}
        name={user.name}
        avatar={user.avatar}
      />
    </div>
  );
};

export default App;

Be sure to disable React's reactStrictMode to avoid potential issues. In React, you can disable it by removing the <React.StrictMode> component from the root file.

In Next.js, you can disable the strict mode by modifying the next.config.js file. To do so, add the following configuration:

const nextConfig = {
  reactStrictMode: false,
};

Before running the frontend project, you need start the Presence Server: prscd service. The prscd can be download from the release page. Or, you can gh repo clone yomorun/presencejs to get the source code, and run cd prscd && make dev to start in development mode.

📚 Documentation

• More about how to implement your real-time application by Presencejs
• Docs: https://presence.js.org

🤝 Free Hosting for Developers

For the convenience of developers, we provide a free hosting service for Presence Server for concurrent connections less than 1000, request for your own on Allegro Cloud.