Package Exports

sticky-horse
sticky-horse/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sticky-horse) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Sticky Horse

A powerful real-time collaboration toolkit for React applications. Add cursor tracking, feedback systems, and real-time presence to your app in minutes.

Features

👥 Real-time cursor tracking and sharing
💬 Interactive feedback system with comments
📝 Sticky notes for collaborative annotations
🎯 Laser pointer for presentations
👤 User presence tracking

Installation

npm install @mohammedsaid/sticky-horse
# or
yarn add @mohammedsaid/sticky-horse

Quick Start

Initialize StickyHorse in your app:

import { initStickyHorse, StickyHorseProvider } from '@mohammedsaid/sticky-horse';
// Import the styles
import '@mohammedsaid/sticky-horse/dist/styles.css';

// Initialize with your API key (get it from the dashboard)
initStickyHorse({
  apiKey: 'your-api-key',
  socketUrl: 'your-socket-url',
  onUserJoin: (user) => {
    console.log('User joined:', user);
  },
  onUserLeave: (user) => {
    console.log('User left:', user);
  }
});

// Wrap your app with the provider
function App() {
  return (
    <StickyHorseProvider>
      <YourApp />
    </StickyHorseProvider>
  );
}

Add cursor tracking to any component:

import { withTracking } from '@mohammedsaid/sticky-horse';

function YourComponent() {
  return <div>Your content here</div>;
}

export default withTracking(YourComponent, '/page-path');

Use the feedback system:

import { UserFeedbackOverlay } from '@mohammedsaid/sticky-horse';

function YourPage() {
  return (
    <div>
      <YourContent />
      <UserFeedbackOverlay />
    </div>
  );
}

Access StickyHorse features in your components:

import { useStickyHorse } from '@mohammedsaid/sticky-horse';

function YourComponent() {
  const { activeUsers, comments, stickyNotes, addComment } = useStickyHorse();

  return (
    <div>
      <h2>Active Users: {activeUsers.length}</h2>
      {/* Your UI */}
    </div>
  );
}

Styles

StickyHorse uses Tailwind CSS for styling. Make sure to:

Import the styles in your app:

import '@mohammedsaid/sticky-horse/dist/styles.css';

If you're using Tailwind CSS in your project, add StickyHorse to your content paths in tailwind.config.js:

module.exports = {
  content: [
    // ... your other content paths
    './node_modules/@mohammedsaid/sticky-horse/dist/**/*.{js,jsx,ts,tsx}'
  ],
  // ... rest of your config
}

API Reference

Components

withTracking(Component, pagePath): HOC to add cursor tracking
UserFeedbackOverlay: Component for feedback system
CursorOverlay: Component for showing other users' cursors
LaserCursorTrail: Component for laser pointer feature

Hooks

useStickyHorse(): Access all StickyHorse features
useCursorTracking(): Hook for cursor tracking
usePageTracking(): Hook for page presence

Configuration

The initStickyHorse function accepts the following options:

interface StickyHorseConfig {
  apiKey: string;
  socketUrl: string;
  onUserJoin?: (user: User) => void;
  onUserLeave?: (user: User) => void;
  onComment?: (comment: Comment) => void;
  onStickyNote?: (note: StickyNote) => void;
  onCursorMove?: (cursor: CursorData) => void;
}

License

MIT