Introduction

CoCursor

CoCursor is a service that supports real-time cursor tracking for React projects. Move the cursor from the Figma canvas to your webpage and track it in real-time.

Installation

First, you need to obtain an API Key for use.
You can get the API key from CoCursor.

Then, install the package in your project using your preferred package manager:

npm i cocursor

CoCursorProvider

Wrap your page component with CoCursorProvider.

import CoCursorProvider from "cocursor";

export default function PageComponent() {
  return (
    <CoCursorProvider apiKey={process.env.REACT_APP_COCURSOR_API_KEY as string}>
      {/* ... */}
    </CoCursorProvider>
  );
}

Props

Prop	Type	Description
apiKey	string	Required API key
children	ReactNode	-
channel	string	Set a channel for your project. channel="team1"
myName	string	The name that appears on your cursor to other users. myName="alexgoni"
allowMyCursorShare	boolean	Whether to send your cursor information to other users. allowMyCursorShare={true}
showMyCursor	boolean	Whether to hide your cursor. showMyCursor={false}
quality	"high", "middle", "low"	Quality setting. The default is "high". quality="middle"
disabled	boolean	Whether to disable CoCursor functionality. disabled={true}

useCoCursor

The useCoCursor hook allows you to modify the settings of CoCursor or read the current settings.

const {
  // state
  channel,
  myName,
  allowMyCursorShare,
  showMyCursor,
  quality,
  disabled,
  // setState
  setChannel,
  setMyName,
  setAllowInfoSend,
  setShowMyCursor,
  setQuality,
  setDisabled,
} = useCoCursor();

Custom Style

You can customize the style of CoCursor by increasing specificity. Here is the complete CSS code for the CoCursor project.

.cocursor__cursor-wrapper {
  position: fixed;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 2147483647;
}

.cocursor__arrow {
  width: 14px;
  height: 14px;
}

.cocursor__label {
  position: absolute;
  top: 8px;
  left: calc(100% + 4px);
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}