Skip to content

v0.8.3 - Export & Enhanced Focus Latest

Latest
Latest

Choose a tag to compare

View all tags
@MikaStiebitz MikaStiebitz released this 13 Feb 17:34
v0.8.3
dc715b5

📸 New Feature: Export to Image/PDF

Added powerful export functionality through the new useGanttExport hook:

  • exportAsPng(filename) - Download chart as PNG
  • exportAsJpeg(filename) - Download chart as JPEG
  • exportAsPdf(filename) - Download chart as PDF
  • getDataUrl(format) - Get base64 data URL
  • copyToClipboard() - Copy chart to clipboard
  • checkDependencies() - Verify export libraries

Required Dependencies:

npm install html2canvas jspdf

🎯 New Feature: Focus Mode

Added focusMode prop for automatic today marker focusing:

  • focusMode - Automatically centers on today marker when switching view modes (default: true)

🐛 Bug Fixes

  • Fixed label alignment in week view when no month box was present
  • All headers now remain sticky during vertical scrolling

Key Highlights

✅ Advanced Export Options: Configure quality, scale, and background color
✅ Smart Focus: Seamless navigation to current date across view modes
✅ Better Sticky Headers: Improved scrolling experience with persistent headers
✅ 100% Backwards Compatible: All new features are opt-in

Example Usage

import { GanttChart, useGanttExport } from 'react-modern-gantt';

function MyComponent() {
  const { ganttRef, exportAsPng, exportAsPdf } = useGanttExport();

  return (
    <div>
      <button onClick={() => exportAsPng('my-gantt')}>Export PNG</button>
      <button onClick={() => exportAsPdf('my-gantt')}>Export PDF</button>
      
      <GanttChart
        ref={ganttRef}
        tasks={tasks}
        focusMode={true}  // Auto-focus on today marker
        darkMode={true}
      />
    </div>
  );
}

Advanced Export Example

const { ganttRef, exportChart } = useGanttExport();

// High-resolution export with custom settings
await exportChart({
  format: 'png',
  filename: 'project-timeline',
  quality: 0.95,
  scale: 2,  // 2x resolution for printing
  backgroundColor: '#ffffff'
});

Previous Features (v0.6.x)

🎛️ Granular editing controls (allowProgressEdit, allowTaskResize, allowTaskMove)
⚡ Performance optimization with interval limits
🔄 Infinite scroll with timeline extension
📊 Enhanced progress bar UI

Install

npm install react-modern-gantt@0.8.3

or

npm install react-modern-gantt@latest
Assets 2
Loading