@yomo/react-cursor-chat - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

package.json

 {
   "name": "@yomo/react-cursor-chat",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A react component for cursor chat",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -1,3 +0,5 @@
-# react-cursor-chat
+# @yomo/react-cursor-chat
 
+## Introduction
+
 A react component for cursor chat
@@ -8,2 +10,6 @@
 
+![screenshot](screenshot.png)
+
+## Quick Start
+
 ### Installation
@@ -15,4 +21,38 @@
 
-### Usage
+#### How do I get a `presenceAuth` token?
 
+If you build your application using next.js, then you can use [API Routes](https://nextjs.org/docs/api-routes/introduction) to get the access token.
+For example, the following API route `pages/api/auth.js` returns a json response with a status code of 200:
+
+```js
+export default async function handler(req, res) {
+    if (req.method === 'GET') {
+        const response = await fetch('https://presence.yomo.dev/api/v1/auth', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                app_id: process.env.PRESENCE_APP_ID,
+                app_secret: process.env.PRESENCE_APP_SECRET,
+            }),
+        });
+        const data = await response.json();
+        res.status(200).json(data.data);
+    } else {
+        // Handle any other HTTP method
+    }
+}
+```
+
+Response data:
+
+```json
+{
+    "token": "eyJhbGciOiJIUzI1..."
+}
+```
+
+#### Importing the CursorChat component
+
 ```jsx
@@ -23,6 +63,13 @@ import React from 'react';
 
-// `wss://ws-dev.yomo.run` is YoMo's demo service
+// `wss://presence.yomo.dev` is YoMo's demo service
 <CursorChat
-    socketURL="wss://ws-dev.yomo.run"
+    presenceURL="wss://presence.yomo.dev"
+    presenceAuth={{
+        // Certification Type
+        type: 'token',
+        // api for getting access token
+        endpoint: '/api/auth',
+    }}
     avatar="https://avatars.githubusercontent.com/u/67308985?s=200&v=4"
+    theme="light"
 />;
@@ -32,3 +79,3 @@ ```
 -   `presenceURL: string`: to set the WebSocket service address.
--   `presenceAuth: { type: 'publickey' | 'token'; publicKey?: string; endpoint?: '/api/auth'; }`: to set `presence` service Auth
+-   `presenceAuth: { type: 'publickey' | 'token'; publicKey?: string; endpoint?: string; }`: to set `presencejs` service Auth
 -   `avatar?: string`: to set avatar.
@@ -38,3 +85,3 @@ -   `name?: string`: to set name.
 
-Or use hooks and customize the components yourself:
+#### Or use hooks and customize the components yourself:
 
@@ -44,2 +91,3 @@ ```tsx
 import { useOnlineCursor, useRenderPosition } from '@yomo/react-cursor-chat';
+import CursorIcon from './CursorIcon';
 
@@ -70,2 +118,6 @@ // You can customise the content of your own mouse block
             <CursorIcon color={cursor.color} />
+            {cursor.name && <div>{cursor.name}</div>}
+            {cursor.avatar && (
+                <img className="avatar" src={cursor.avatar} alt="avatar" />
+            )}
         </div>
@@ -76,3 +128,3 @@ );
 // Exporting your custom components
-export const YourComponent = ({ presenceURL, presenceAuth, name, avatar }) => {
+const YourComponent = ({ presenceURL, presenceAuth, name, avatar }) => {
     const { me, others } = useOnlineCursor({
@@ -98,28 +150,5 @@ presenceURL,
 };
-
-function CursorIcon({ color }) {
-    return useMemo(
-        () => (
-            <svg
-                shapeRendering="geometricPrecision"
-                xmlns="http://www.w3.org/2000/svg"
-                fill={color}
-            >
-                <path
-                    fill="#666"
-                    d="M9.63 6.9a1 1 0 011.27-1.27l11.25 3.75a1 1 0 010 1.9l-4.68 1.56a1 1 0 00-.63.63l-1.56 4.68a1 1 0 01-1.9 0L9.63 6.9z"
-                />
-                <path
-                    stroke="#fff"
-                    strokeWidth="1.5"
-                    d="M11.13 4.92a1.75 1.75 0 00-2.2 2.21l3.74 11.26a1.75 1.75 0 003.32 0l1.56-4.68a.25.25 0 01.16-.16L22.4 12a1.75 1.75 0 000-3.32L11.13 4.92z"
-                />
-            </svg>
-        ),
-        [color]
-    );
-}
 ```
 
-### LICENSE
+## LICENSE
 
@@ -126,0 +155,0 @@ <a href="/LICENSE" target="_blank">

No alert changes

Improved metrics

Total package byte prevSize

373679

increased by0.19%

Number of lines in readme file

149

increased by24.17%

No dependency changes