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

Last update: Jun 8, 2022

@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

GitHub

https://github.com/yomorun/react-cursor-chat
You might also like...

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

Jun 17, 2022

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

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.

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

Feb 28, 2022

A performant, scalable and pluggable approach to instrumenting your React application.

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

May 22, 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

Jun 17, 2022

Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.

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

May 11, 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

Jun 14, 2022

Compose multiple setState or getDerivedStateFromProps updaters in React

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

Dec 22, 2021

โš›๏ธ ๐Ÿ”ง Lodash as React components

โš›๏ธ ๐Ÿ”ง Lodash as React components

react-lodash Use any lodash function as a React component Example Without import react from 'react' array && array.length ? ( ul {array.map(i

May 21, 2022
Comments
  • 1. [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

    Reviewed by imgbot[bot] at 2022-03-03 06:29
  • 2. [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

    Reviewed by imgbot[bot] at 2022-02-25 06:45
  • 3. [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

    Reviewed by imgbot[bot] at 2022-01-30 06:10
  • 4. [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

    Reviewed by imgbot[bot] at 2022-03-09 02:41
๐Ÿ”ฑ Svelte component runs everywhere, adapter for react/vue2/vue3/svelte.
๐Ÿ”ฑ  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

Apr 14, 2022
Simple and elegant component-based UI library
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

Jun 24, 2022
React, React Native and Vue UI components for building data-driven apps with Elasticsearch
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

Jun 23, 2022
โšก๏ธ Lightning-fast search for React and React Native applications, by Algolia.
โšก๏ธ 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

Jun 19, 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: 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

Jun 18, 2022
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

May 20, 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

Jun 21, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules
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

Jun 19, 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

Jun 19, 2022
Immutable state for React.js
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

Jun 18, 2021