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

1. 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>
  );
}

2. 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');

3. Use the feedback system:

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

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

4. 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:

1. Import the styles in your app:

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

2. 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