@yomo/react-cursor-chat
🧬
Introduction
A react component for cursor chat
- Press
/to bring up the input box - Press
ESCto close the input box
🤹🏻♀️ Quick Start
Installation
by npm:
$ npm i --save @yomo/react-cursor-chat
by yarn:
$ yarn add @yomo/react-cursor-chat
by pnpm:
$ pnpm i @yomo/react-cursor-chat
Integrate to your project
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
presenceURL="wss://presence.yomo.dev"
presenceAuth={{
type: 'publickey',
publicKey: 'YOUR_PUBLIC_KEY'
}}
avatar='assets/cursor.png'
theme="light"
/>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Start
$ npm run start
🥷🏼 Advanced
Importing the CursorChat component
import React from 'react';
import CursorChat from '@yomo/react-cursor-chat';
import '@yomo/react-cursor-chat/dist/cursor-chat.min.css';
// `wss://presence.yomo.dev` is YoMo's free public test service
<CursorChat
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"
/>;
presenceURL: string: to set the WebSocket service address.presenceAuth: { type: 'publickey' | 'token'; publicKey?: string; endpoint?: string; }: to setpresencejsservice Authavatar?: string: to set avatar.name?: string: to set name.theme?: 'light' | 'dark': The background color of the chat box, the default value is "dark".
Use hooks and customize the components yourself:
import React, { useMemo } from 'react';
import { useOnlineCursor, useRenderPosition } from '@yomo/react-cursor-chat';
import CursorIcon from './CursorIcon';
// You can customise the content of your own mouse block
const MeCursor = ({ cursor }) => {
const refContainer = useRenderPosition(cursor);
return useMemo(
() => (
<div className="cursor" ref={refContainer}>
<CursorIcon color={cursor.color} />
{cursor.name && <div>{cursor.name}</div>}
{cursor.avatar && (
<img className="avatar" src={cursor.avatar} alt="avatar" />
)}
</div>
),
[]
);
};
// You can customise what other people's mouse blocks can display
const OthersCursor = ({ cursor }) => {
const refContainer = useRenderPosition(cursor);
return (
<div ref={refContainer} className="cursor">
<CursorIcon color={cursor.color} />
{cursor.name && <div>{cursor.name}</div>}
{cursor.avatar && (
<img className="avatar" src={cursor.avatar} alt="avatar" />
)}
</div>
);
};
// Exporting your custom components
const YourComponent = ({ presenceURL, presenceAuth, name, avatar }) => {
const { me, others } = useOnlineCursor({
presenceURL,
presenceAuth,
name,
avatar,
});
if (!me) {
return null;
}
return (
<div className="container">
{others.map(item => (
<OthersCursor key={item.id} cursor={item} />
))}
<MeCursor cursor={me} />
</div>
);
};
For Production env, How do I get a presenceAuth token?
If you build your application using next.js, then you can use API Routes 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:
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:
{
"token": "eyJhbGciOiJIUzI1..."
}
LICENSE
![[ImgBot] Optimize images](https://avatars.githubusercontent.com/in/4706?v=4)
112 Aug 25, 2022
64 Dec 27, 2022
14.7k Jan 8, 2023
4.7k Jan 4, 2023
2k Dec 27, 2022
633 Jan 5, 2023
9 Dec 2, 2022
7 Nov 21, 2022
921 Dec 16, 2022
8.7k Dec 30, 2022
6.5k Dec 30, 2022
1k Dec 12, 2022
3.3k Jan 5, 2023
15 May 14, 2022
430 Dec 23, 2022
369 Dec 25, 2022
9k Jan 5, 2023
161 Dec 22, 2022