CoreUI PRO for React v5.20.0

We are pleased to announce CoreUI PRO for React v5.20.0 — a feature-focused release that introduces the previewDateOnHover functionality to date picker components, along with dependency updates and code quality improvements.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular

Bootstrap

React.js

Vue.js

How to Upgrade

To update your project to CoreUI PRO for React v5.20.0, follow these steps:

1. Open your package.json.
2. Update the following dependencies:
   • @coreui/react-pro to 5.20.0
   • @coreui/coreui-pro to 5.18.0
3. Save the file.
4. Run your package manager:
   • npm: npm install
   • yarn: yarn install

🚀 What’s New

✨ New Features

CDatePicker & CDateRangePicker

• Preview Date on Hover: Added previewDateOnHover prop to enable or disable live preview of dates in input fields when hovering over calendar cells
  • Enhances user experience by providing visual feedback during date selection
  • Allows developers to control preview behavior based on application requirements
  • Seamlessly integrated with existing date picker functionality

// Enable live preview when hovering over calendar dates
<CDatePicker previewDateOnHover />

// Disable preview for cleaner interaction
<CDateRangePicker previewDateOnHover={false} />

🛠 Code Quality Improvements

• Documentation Updates: Updated route documentation for better navigation and clarity
• Code Cleanup: General maintenance and optimization across components
• TypeScript Support: Enhanced type definitions for the new previewDateOnHover prop

📦 Dependency Updates

This release includes important dependency updates for enhanced performance, security, and compatibility:

Core Dependencies

• Updated @coreui/coreui-pro from ^5.17.0 to ^5.18.0

Development Tools

• Updated @typescript-eslint/parser from ^8.38.0 to ^8.39.0
• Updated eslint from ^9.32.0 to ^9.33.0
• Updated eslint-plugin-prettier from ^5.5.3 to ^5.5.4
• Updated gatsby from ^5.14.5 to ^5.14.6
• Updated typescript-eslint from ^8.38.0 to ^8.39.0
• Updated sass from ^1.89.2 to ^1.90.0

🎯 Enhanced User Experience

Date Picker Improvements

The new previewDateOnHover feature provides:

• Visual Feedback: Users can see a preview of selected dates in the input field while hovering over calendar cells
• Improved Accessibility: Better visual cues for date selection process
• Flexible Control: Developers can enable or disable this feature based on their design requirements
• Performance Optimized: Smooth hover interactions without impacting calendar performance

💡 Migration Notes

New Props

The following new prop is available for date picker components:

// Date Picker with hover preview
<CDatePicker 
  previewDateOnHover={true}  // Enable live preview (default behavior)
  // ... other props
/>

// Date Range Picker with disabled hover preview
<CDateRangePicker 
  previewDateOnHover={false} // Disable live preview
  // ... other props
/>

No Breaking Changes

All changes are backward compatible. Existing date picker implementations will continue to work without modifications while benefiting from the enhanced hover preview functionality where enabled.

📖 Technical Details

The previewDateOnHover feature is implemented with:

• Optimized event handling for smooth hover interactions
• Proper cleanup of preview states when hovering ends
• Integration with existing validation and formatting logic
• Support for both single date and date range selections

Upgrade to CoreUI PRO for React v5.20.0 today to provide your users with enhanced date selection experiences. This release demonstrates our commitment to continuously improving user interface components with thoughtful, user-centric features.

📚 Learn More

For detailed documentation and implementation examples, visit:

• CoreUI React Documentation