@yomo/cursor-chat-react v1.0.1

@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

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

const user = {
  ID: "spiderman",
  Name: "Peter Parker",
  avatar: "https://i.pravatar.cc/150?img=3",
};

let url = env.NEXT_PUBLIC_PRESENCE_URL || "https://lo.yomo.dev:8443/v1";
const presence = createPresence(url, {
  publicKey: env.NEXT_PUBLIC_PRESENCE_PUBLIC_KEY,
  id: user.ID,
  autoDowngrade: true, // downgrade to websocket automatically if webTransport not work
});

const App = () => {
  return (
    <div className="main">
      <img className="logo" src={logo} alt="logo" />
      <p className="tips">
        Press <span>/</span> to bring up the input box <br /> Press{" "}
        <span>ESC</span> to close the input box
      </p>
      <CursorChat
        presence={presence}
        id={user.ID}
        name={user.Name}
        avatar={user.avatar}
      />
    </div>
  );
};

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.