# React Chrono 3.0.0 - Product: React Chrono (https://whatsnew.fyi/product/react-chrono) - Vendor: Prabhu Murthy - Date: 2025-10-15 - Version: 3.0.0 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.0.0 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/3.0.0 What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog. Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'. --- - **changed** — Migrate styling system from styled-components to Vanilla Extract CSS for zero-runtime CSS-in-TypeScript and improved performance - **added** — Add type-safe design tokens system with sprinkles utilities for consistent styling across components - **changed** — Consolidate multiple context providers into a single optimized TimelineContextProvider with unified useTimelineContext() hook - **changed** — Implement smart memoization strategies with separated static config, dynamic state, and computed values for optimized re-renders - **changed** — Update Vite configuration with enhanced tree-shaking and bundle optimization - **added** — Add Stylelint configuration and enhanced ESLint rules - **changed** — Improve TypeScript strict mode compliance across all components - **added** — Introduce grouped configuration API with 9 prop categories: layout, interaction, content, display, media, animation, style, accessibility, and i18n - **changed** — Maintain backward compatibility with all v2.x props through automatic mapping to new API - **added** — Add dynamic Google Fonts integration with automatic optimization, caching, and granular control over font families, weights, and styles per element - **added** — Add comprehensive internationalization with 40+ configurable text elements across 11 categories and template string support for dynamic text interpolation - **added** — Add fullscreen mode with cross-browser support, keyboard shortcuts, and proper portal container management - **added** — Expand dark mode with 25+ theme properties including button states, shadows, glows, and search highlighting, with runtime theme switching via onThemeChange callback - **added** — Add sticky toolbar option with configurable placement - **added** — Add customizable search with configurable input widths and toolbar positioning - **added** — Add borderless card variant design - **added** — Add text density control with dynamic card remeasurement when switching between compact and detailed views - **changed** — Improve keyboard navigation with better focus management and visual feedback - **changed** — Implement context-aware popover positioning with fullscreen awareness - **changed** — Refine slideshow transitions with improved card animations and progress indicators ##### v3.0.0 - Major Release > 🎉 A complete architectural evolution with powerful new features, improved performance, and enhanced developer experience --- ###### 🏗️ **Architecture & Performance** ###### Styling System Migration - ⚡ **Migrated to Vanilla Extract CSS** - Replaced styled-components with Vanilla Extract for zero-runtime CSS-in-TypeScript, resulting in significantly improved performance and type-safe styling - 🎨 **Type-Safe Design Tokens** - Comprehensive token system with sprinkles utilities for consistent styling across components ###### Context System Redesign - 🔄 **Unified Context Provider** - Consolidated multiple context providers into a single optimized `TimelineContextProvider`, reducing complexity and improving render performance - 🚀 **Optimized Re-renders** - Smart memoization strategies with separated static config, dynamic state, and computed values - 💡 **Enhanced Developer Experience** - Simpler API with `useTimelineContext()` hook replacing multiple context hooks ###### Build & Tooling Improvements - 🛠️ **Modern Build Pipeline** - Updated Vite configuration with enhanced tree-shaking and bundle optimization - 📊 **Code Quality** - Added Stylelint configuration, enhanced ESLint rules, and improved TypeScript strict mode compliance --- ###### ✨ **New Features** ###### Grouped Configuration API ```jsx ``` - 📋 **Logical Organization** - Props grouped into 9 intuitive categories: `layout`, `interaction`, `content`, `display`, `media`, `animation`, `style`, `accessibility`, `i18n` - 🔄 **Backward Compatible** - All v2.x props continue to work with automatic mapping to new API - 💡 **Better Autocomplete** - Improved IDE support with structured prop hierarchy ###### Google Fonts Integration - 🔤 **Dynamic Font Loading** - Seamless Google Fonts integration with automatic optimization and caching - 🎯 **Granular Control** - Configure font families, weights, and styles per element (titles, subtitles, card text) - ⚡ **Performance Optimized** - Intelligent font preloading and fallback strategies ###### Comprehensive Internationalization - 🌍 **40+ Configurable Text Elements** - Complete i18n coverage across 11 categories (navigation, search, toolbar, media, accessibility, etc.) - 📝 **Template String Support** - Dynamic text interpolation with variables (e.g., "Page {current} of {total}") - 🔀 **Smart Fallbacks** - Intelligent default text resolution with only-override-what-you-need approach ###### Fullscreen Mode - 🖥️ **Cross-Browser Support** - Full-screen timeline experience with vendor prefix handling for all major browsers - ⌨️ **Keyboard Shortcuts** - ESC to exit, consistent behavior across all modes - 🎯 **Portal Optimization** - Proper portal container management for fullscreen-aware components ###### Enhanced Dark Mode - 🌙 **25+ Theme Properties** - Comprehensive dark mode support including button states, shadows, glows, and search highlighting - 🎨 **Automatic Color Adaptation** - Intelligent contrast handling for readability - 🔄 **Runtime Theme Switching** - Seamless dark/light mode transitions with `onThemeChange` callback ###### Advanced UI Controls - 📌 **Sticky Toolbar** - Optional sticky positioning for toolbar with configurable placement - 🔍 **Customizable Search** - Configurable search input widths and toolbar positioning - 🎴 **Borderless Card Variant** - Clean, minimal card design for modern interfaces - 📏 **Text Density Control** - Dynamic card remeasurement when switching between compact/detailed views --- ###### 🎨 **UX Improvements** ###### Navigation & Interaction - ⌨️ **Enhanced Keyboard Navigation** - Improved focus management with bet _[Truncated at 4000 characters — full notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.0.0]_