@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.