reactdesk-core

ReactDesk

🖥️ A powerful React-based desktop environment library

Create stunning Windows 11 and macOS-like desktop interfaces with ease

Demo • Documentation • Examples • Contributing

✨ Features

🪟 Window Management	Draggable, resizable, minimizable, maximizable windows with smooth animations
🎨 Theme Support	Built-in Windows 11 and macOS themes with dark/light mode
📱 Responsive Design	Adapts seamlessly to different screen sizes and orientations
🎯 Window Snapping	7 different snap layouts for efficient window organization
🖼️ Taskbar & Dock	Fully functional taskbar with window previews and app pinning
⚡ Performance	Optimized rendering with React 18 features and code splitting
🔧 Customizable	Extensive configuration options for appearance and behavior
📦 TypeScript	Full TypeScript support with comprehensive type definitions

🚀 Quick Start

Installation

npm install @reactdesk/core
# or
yarn add @reactdesk/core
# or
pnpm add @reactdesk/core

Basic Usage

import React from 'react';
import { ReactDesk } from '@reactdesk/core';
import type { ReactDeskConfig } from '@reactdesk/core';

const config: ReactDeskConfig = {
  themeName: 'win11',
  applications: [
    {
      name: 'My App',
      icon: '📁',
      windowContent: () => <div>Hello World!</div>,
      windowConfig: {
        title: 'My Application',
        defaultSize: { width: 600, height: 400 }
      }
    }
  ]
};

function App() {
  return <ReactDesk {...config} />;
}

export default App;

📖 Documentation

Configuration Options

Theme Configuration

interface ThemeConfig {
  themeName?: 'win11' | 'macos';        // Desktop theme
  themeLayout?: 'win11' | 'macos';      // Layout style
  colorScheme?: 'light' | 'dark';       // Color scheme
  wallpaper?: string | React.ReactNode; // Background
}

Window Configuration

interface WindowConfig {
  title?: string;                        // Window title
  icon?: string | React.ReactNode;       // Window icon
  defaultSize?: { width: number; height: number };
  initialRelativePosition?: { top?: number; left?: number; };
  allowResizing?: boolean;               // Enable resizing
  hideTitlebar?: boolean;               // Hide titlebar
  backgroundColor?: string;              // Window background
  maximized?: boolean;                  // Start maximized
  minimized?: boolean;                  // Start minimized
}

Application Definition

interface Application {
  name: string;                          // App name
  icon?: string | React.ReactNode;       // App icon
  windowContent: React.FC;               // Window content
  windowConfig?: WindowConfig;           // Window settings
  taskbarPin?: boolean;                  // Pin to taskbar
  runOnStart?: boolean;                  // Auto-start
  singleton?: boolean;                   // Single instance
}

Advanced Examples

Custom Wallpaper

<ReactDesk 
  wallpaper="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
  // or use an image
  wallpaper="https://example.com/wallpaper.jpg"
  // or a React component
  wallpaper={<AnimatedBackground />}
/>

Multiple Windows

const config: ReactDeskConfig = {
  initialState: {
    windows: [
      {
        Component: FileExplorer,
        title: 'File Explorer',
        defaultSize: { width: 800, height: 600 },
        initialRelativePosition: { top: 50, left: 50 }
      },
      {
        Component: Terminal,
        title: 'Terminal',
        defaultSize: { width: 600, height: 400 },
        initialRelativePosition: { top: 100, left: 100 }
      }
    ]
  }
};

Using Hooks

import { useWindows, useProcesses, useSession } from '@reactdesk/core';

function MyComponent() {
  const { createWindow, closeWindow, maximize } = useWindows();
  const { createProcess } = useProcesses();
  const { foregroundId } = useSession();
  
  const openNewWindow = () => {
    const windowId = createWindow({
      Component: MyWindowContent,
      title: 'New Window',
      defaultSize: { width: 600, height: 400 }
    });
  };
  
  return <button onClick={openNewWindow}>Open Window</button>;
}

🎨 Themes

Windows 11 Theme

• Fluent Design System
• Acrylic blur effects
• Smooth animations
• Snap layouts
• Start menu integration

macOS Theme

• Apple Design Language
• Dock with magnification
• Mission Control view
• Native macOS controls
• Spotlight search

🏗️ Architecture

ReactDesk uses a modular architecture with context providers for state management:

ReactDesk
├── SignalProvider       # Event system
├── ViewportProvider     # Screen management
├── SessionProvider      # Session state
├── ProcessProvider      # Process management
├── WindowsProvider      # Window management
├── SyscallProvider      # System operations
├── ConfigProvider       # Configuration
├── ElementsProvider     # DOM references
└── MenuProvider         # Menu state

📊 Performance

• Bundle Size: ~200KB gzipped
• Code Splitting: Automatic chunking for optimal loading
• Lazy Loading: Components loaded on demand
• Animations: GPU-accelerated with Framer Motion
• React 18: Concurrent features for smooth interactions

🛠️ Development

Prerequisites

• Node.js >= 16.0.0
• npm >= 7.0.0 or yarn >= 1.22.0

Setup

# Clone the repository
git clone https://github.com/yourusername/reactdesk.git
cd reactdesk

# Install dependencies
yarn install

# Start development server
yarn dev

# Build for production
yarn build

# Run tests
yarn test

Project Structure

reactdesk/
├── lib/                  # Library source code
│   ├── components/       # React components
│   ├── contexts/         # Context providers
│   ├── hooks/           # Custom hooks
│   ├── styles/          # Themes and styles
│   ├── types/           # TypeScript types
│   └── utils/           # Utility functions
├── src/                  # Demo application
├── example/              # Example implementations
├── dist/                 # Build output
└── scripts/              # Build and utility scripts

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

How to Contribute

• Fork the repository
• Create your feature branch (git checkout -b feature/AmazingFeature)
• Commit your changes (git commit -m 'Add some AmazingFeature')
• Push to the branch (git push origin feature/AmazingFeature)
• Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by Windows 11 and macOS design systems
• Built with React
• Styled with styled-components
• Animations by Framer Motion
• Window management with react-rnd

📊 Stats

🗺️ Roadmap

• Touch and mobile support
• Virtual desktop spaces
• File system integration
• Terminal emulator
• Notification system
• Context menus
• Keyboard shortcuts
• Accessibility improvements
• More themes (Ubuntu, KDE, etc.)
• Plugin system

💬 Community

• Discord Server
• GitHub Discussions
• Twitter
• Stack Overflow

📮 Support

• 🐛 Report Bugs
• 💡 Request Features
• 📧 Email Support
• 💰 Sponsor on GitHub

Made with ❤️ by the ReactDesk Team
reactdesk.dev