React-cursor-chat - A react component for cursor chat

Overview

@yomo/react-cursor-chat

🧬 Introduction

A react component for cursor chat

  • Press / to bring up the input box
  • Press ESC to close the input box

screenshot

πŸ€ΉπŸ»β€β™€οΈ 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 set presencejs service Auth
  • avatar?: 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

License: MIT
Comments
  • Not getting the others array from the useOnlineCursor() hook

    Not getting the others array from the useOnlineCursor() hook

    hi I am using this react-cursor-chat library in react application but not getting the others array from the useOnlineCursor hook

    `import CursorChat, { useOnlineCursor, useRenderPosition, } from "@yomo/react-cursor-chat";

    const { me, others } = useOnlineCursor({ presenceURL: "https://prsc.yomo.dev", presenceAuthEndpoint: "/api/auth", avatar: "https://cursor-chat-example.vercel.app/_next/image?url=%2Flogo.png&w=256&q=75", name: user.displayName, });`

    I am not getting the others online users

    Screenshot (35) Screenshot (36)

    bug 
    opened by swatantragoswami09 23
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced πŸŽ‰

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /apricot-yellow.png | 23.11kb | 20.36kb | 11.91% | | /hairy-green.png | 22.84kb | 20.36kb | 10.83% | | /example/public/logo.png | 20.82kb | 20.26kb | 2.67% | | /show.gif | 1,516.50kb | 1,500.32kb | 1.07% | | | | | | | Total : | 1,583.26kb | 1,561.29kb | 1.39% |


    πŸ“ docs | :octocat: repo | πŸ™‹πŸΎ issues | πŸͺ marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced πŸŽ‰

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /example/public/logo.png | 20.82kb | 20.26kb | 2.67% | | /show.gif | 1,516.50kb | 1,500.32kb | 1.07% | | | | | | | Total : | 1,537.32kb | 1,520.58kb | 1.09% |


    πŸ“ docs | :octocat: repo | πŸ™‹πŸΎ issues | πŸͺ marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 18% πŸŽ‰

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /vercel-deploy.jpg | 109.66kb | 86.76kb | 20.88% | | /commerce-screenshot.jpg | 164.30kb | 134.74kb | 17.99% | | /example/logo.png | 20.82kb | 20.26kb | 2.67% | | | | | | | Total : | 294.77kb | 241.76kb | 17.99% |


    πŸ“ docs | :octocat: repo | πŸ™‹πŸΎ issues | πŸͺ marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced πŸŽ‰

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /themeColor.png | 126.66kb | 92.35kb | 27.09% | | /apricot-yellow.png | 23.11kb | 20.36kb | 11.91% | | /hairy-green.png | 22.84kb | 20.36kb | 10.83% | | /show.gif | 1,516.50kb | 1,500.32kb | 1.07% | | | | | | | Total : | 1,689.11kb | 1,633.39kb | 3.30% |


    πŸ“ docs | :octocat: repo | πŸ™‹πŸΎ issues | πŸͺ marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 0
Owner
YoMo
Geo-distributed system Framework
YoMo
πŸ”± Svelte component runs everywhere, adapter for react/vue2/vue3/svelte.

Write components once, run everywhere. Make svelte components run inside React or Vue applications. Managing support for libraries that provide UI com

Productivity Improvement Research Laboratory 112 Aug 25, 2022
RTConnect is an easy-to-use React component library that enables developers to set up live, real-time video calls, between multiple connected peers on different computers

RTConnect is an easy-to-use React component library that enables developers to set up live, real-time video calls, between multiple connected peers on different computers in a React app.

OSLabs Beta 64 Dec 27, 2022
Simple and elegant component-based UI library

Simple and elegant component-based UI library Custom components β€’ Concise syntax β€’ Simple API β€’ Tiny Size Riot brings custom components to all modern

Riot.js 14.7k Jan 8, 2023
React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Reactive Search UI components library for Elasticsearch: Available for React, Vue and React Native Read how to build an e-commerce search UI a.) with

appbase.io 4.7k Jan 4, 2023
⚑️ Lightning-fast search for React and React Native applications, by Algolia.

React InstantSearch is a library for building blazing fast search-as-you-type search UIs with Algolia. React InstantSearch is a React library that let

Algolia 2k Dec 27, 2022
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

KΓ©vin Dunglas 633 Jan 5, 2023
react-pdf-highlighter is a React library that provides annotation experience for PDF documents on web.

β˜•οΈ Buy me a coffee react-pdf-highlighter react-pdf-highlighter is a React library that provides annotation experience for PDF documents on web. It is

Vladyslav 9 Dec 2, 2022
Automatically AJAXify plain HTML with the power of React. It's magic!

React-Magic and HTMLtoJSX React-Magic is an experimental library that uses the power of Facebook's React library to inject AJAX-loading goodness into

React Community 921 Dec 16, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

contra 6.5k Dec 30, 2022
Immutable state for React.js

react-cursor Immutable state for React.js react-cursor hello-world in a fiddle What is react-cursor Cursors are a tool for working with recursive or d

Dustin Getz 1k Dec 12, 2022
Mobile App Framework powered by React

TouchstoneJS Mobile App Framework powered by React. See the demo at touchstonejs.io. Follow @touchstonejs on Twitter for updates. See the touchstone-s

TouchstoneJS 3.3k Jan 5, 2023
Centrally manage state for React applications with CSP

State Trooper Install npm npm install state-trooper Yarn yarn add state-trooper Example Usage Call StateTrooper.patrolRunLoop in your route handler/ma

Swipely 15 May 14, 2022
Maple.js is a React webcomponents based framework mixing ES6 with Custom Elements, HTML Imports and Shadow DOM. It has in-built support for SASS and JSX, including a Gulp task for vulcanizing your project.

Heroku: http://maple-app.herokuapp.com/ npm: npm install maple.js Bower: bower install maple.js Maple is a seamless module that allows you to organise

Adam Timberlake 430 Dec 23, 2022
A performant, scalable and pluggable approach to instrumenting your React application.

react-i13n react-i13n provides a performant, scalable and pluggable approach to instrumenting your React application. Typically, you have to manually

Yahoo 369 Dec 25, 2022
svg react icons of popular icon packs

React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons

null 9k Jan 5, 2023
Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.

"Keo" is the Vietnamese translation for glue. Plain functions for a more functional Deku approach to creating stateless React components, with functio

Adam Timberlake 225 Sep 24, 2022
Configure and build views using JSON schemas mapped to React components

react-json-schema npm install react-json-schema Construct React elements from JSON by mapping JSON definitions to React components. Use react-json-sch

Club OS 161 Dec 22, 2022
Compose multiple setState or getDerivedStateFromProps updaters in React

✍️ compose-state compose-state is a library that composes multiple state updaters in React. compose-state works with the standard setState parameters

Tyler Deitz 119 Dec 22, 2021