PPT Preview

A React component library for creating presentation slides with drawing capabilities.

Features

• 🎨 Drawing Tools: Pen, marker, laser pointer, and eraser
• 🎯 Interactive Canvas: Full-screen presentation mode with drawing capabilities
• 🎨 Color Palette: Multiple color options for drawing tools
• 📱 Responsive Design: Works on desktop and mobile devices
• 🎪 Fullscreen Mode: Immersive presentation experience
• ⌨️ Keyboard Navigation: Arrow keys and space bar for slide navigation
• 🎨 Custom Styling: CSS Modules for easy customization
• 📄 PPT Export: Export presentations as PPTX files
• 🤖 AI Text Replacement: Replace template placeholders with AI-generated content

Installation

npm install ppt-preview
# or
yarn add ppt-preview
# or
pnpm add ppt-preview

Usage

Basic Usage

import React, { useRef } from 'react'
import { PptPreview } from 'ppt-preview'

function App() {
  const apiRef = useRef(null)
  
  const pptData = JSON.stringify([
    {
      id: 'slide-1',
      title: 'Slide 1',
      // ... your slide data
    }
  ])

  return (
    <PptPreview
      isOpen={true}
      onClose={() => console.log('closed')}
      pptList={pptData}
      apiRef={apiRef}
    />
  )
}

Advanced Usage

import React, { useRef, useState } from 'react'
import { PptPreview } from 'ppt-preview'

function PresentationApp() {
  const [isOpen, setIsOpen] = useState(false)
  const apiRef = useRef(null)
  
  const handleExport = () => {
    if (apiRef.current) {
      apiRef.current.exportPpt()
    }
  }

  const handleReplaceText = () => {
    if (apiRef.current?.replacePptText) {
      const template = "Hello {name}, welcome to {company}!"
      const aiText = "John, TechCorp"
      const result = apiRef.current.replacePptText(template, aiText)
      console.log(result) // "Hello John, welcome to TechCorp!"
    }
  }

  const pptData = JSON.stringify([
    {
      id: 'slide-1',
      title: 'Introduction',
      objects: [
        // Fabric.js objects
      ]
    },
    {
      id: 'slide-2', 
      title: 'Main Content',
      objects: [
        // Fabric.js objects
      ]
    }
  ])

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Open Presentation
      </button>
      <button onClick={handleExport}>
        Export PPT
      </button>
      <button onClick={handleReplaceText}>
        Replace Text
      </button>
      
      <PptPreview
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        pptList={pptData}
        apiRef={apiRef}
      />
    </div>
  )
}

Props

PptPreviewProps

| Prop | Type | Required | Description | |------|------|----------|-------------| | isOpen | boolean | ✅ | Controls the visibility of the presentation | | onClose | () => void | ✅ | Callback when the presentation is closed | | pptList | string | ✅ | JSON string containing slide data | | apiRef | React.MutableRefObject<{ exportPpt?: () => void, replacePptText?: (template: string, aiText: string) => string } \| null> | ❌ | Reference to access export and text replacement functionality |

API Methods

The apiRef provides access to the following methods:

exportPpt()

Exports the current presentation as a PPTX file.

if (apiRef.current?.exportPpt) {
  apiRef.current.exportPpt()
}

replacePptText(template: string, aiText: string)

Replaces placeholder text in templates with AI-generated content.

Parameters:

• template: String containing placeholders like {name}, {company}, etc.
• aiText: Comma-separated values to replace the placeholders

Returns: String with placeholders replaced

if (apiRef.current?.replacePptText) {
  const template = ""
  const aiText = ""
  const result = apiRef.current.replacePptText(template, aiText)
}

Slide Data Format

Each slide should follow this structure:

interface DrawingType {
  id: string
  title: string
  objects?: fabric.Object[] // Fabric.js objects
  // ... other Fabric.js canvas properties
}

Drawing Tools

The component includes the following drawing tools:

• Pen: Standard drawing tool
• Marker: Highlighter with transparency
• Laser Pointer: Temporary drawing with fade effect
• Eraser: Remove drawn content
• Clear All: Remove all drawings

Keyboard Shortcuts

• ← / ↑: Previous slide
• → / ↓ / Space: Next slide
• Esc: Exit drawing mode or close presentation

Styling

The component uses CSS Modules. You can customize the appearance by overriding the CSS classes:

Dependencies

This package requires:

• React >= 18.0.0
• React DOM >= 18.0.0
• Fabric.js (included)
• PPTXGenJS (included)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please file an issue on GitHub.