CoreUI PRO for React v5.24.1 - Maintenance Update

We are pleased to announce the release of CoreUI PRO for React v5.24.1. This maintenance release includes bug fixes and improvements while maintaining all functionality from v5.24.0, including the powerful Calendar component with custom cell rendering and quarter selection, plus Chip and Chip Input components.

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 Update

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

1. Open your project’s package.json.
2. Locate the @coreui/react-pro entry under dependencies and update the version number to 5.24.1.
3. Find the @coreui/coreui-pro entry under dependencies and update the version number to ^5.24.2.
4. Save your changes to the package.json file.
5. In your project’s root directory, run the update command appropriate for your package manager:
   • For npm users, execute npm install.
   • For yarn users, execute yarn install.
   • For pnpm users, execute pnpm install.

What’s New

Improvements

This maintenance release includes:

• Bug Fixes: Minor bug fixes and stability improvements
• Performance: Optimizations for better component rendering
• TypeScript: Enhanced type definitions and improvements
• Compatibility: Better React 18+ compatibility
• Documentation: Updated examples and API documentation

All Features Included

This release maintains all features and improvements from v5.24.0:

Calendar Component Enhancements

• Calendar - Custom Cell Rendering: Customize individual calendar cells with custom content, styling, and behavior. Perfect for event calendars, booking systems, resource scheduling, and any application requiring rich calendar visualizations.

• Calendar - Quarter Selection: Select entire fiscal quarters (Q1-Q4) with a single interaction. Ideal for financial reporting, business analytics, and quarterly planning applications.

Chip Components

• Chip Component: Display compact, interactive elements representing tags, contacts, or selected items with dismissible functionality and avatars.

• Chip Input Component: Multi-value input component for entering multiple values as chips, perfect for tags, email recipients, and keywords.

Code Examples

Calendar with Custom Cell Rendering

import { CCalendar } from '@coreui/react-pro'

function EventCalendar() {
  const renderCell = (date: Date) => {
    const events = getEventsForDate(date)
    return (
      <div className="calendar-cell">
        <span className="date">{date.getDate()}</span>
        {events.length > 0 && (
          <span className="event-count">{events.length}</span>
        )}
      </div>
    )
  }

  return <CCalendar cellRenderer={renderCell} />
}

Chip Input for Tags

import { CChipInput } from '@coreui/react-pro'
import { useState } from 'react'

function TagInput() {
  const [tags, setTags] = useState(['react', 'typescript'])

  return (
    <CChipInput
      value={tags}
      onChange={setTags}
      placeholder="Add tags..."
    />
  )
}

PRO-Exclusive Components

CoreUI PRO for React includes all enterprise components:

• Calendar: Advanced calendar with events and custom rendering
• Date Picker: Feature-rich date selection
• Date Range Picker: Date range selection
• Time Picker: Intuitive time selection
• Multi Select: Advanced dropdown with search
• Smart Table: Enterprise data table
• Smart Pagination: Advanced pagination
• Loading Button: Button with loading state
• Chip: Compact information display
• Chip Input: Multi-value chip input
• Range Slider: Interactive range selection
• Rating: Star rating component

TypeScript Support

All components include comprehensive TypeScript definitions:

interface CCalendarProps {
  selectionMode?: 'single' | 'multiple' | 'range' | 'quarter'
  cellRenderer?: (date: Date) => React.ReactNode
  onQuarterSelect?: (quarter: number, year: number) => void
  // ... more props
}

interface CChipInputProps {
  value: string[]
  onChange: (values: string[]) => void
  placeholder?: string
  // ... more props
}

Performance and Compatibility

CoreUI PRO for React v5.24.1 maintains compatibility with:

• React: v18.0.0 and newer
• TypeScript: v4.5.0 and newer
• Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
• Mobile Browsers: iOS Safari, Chrome Mobile

Optimizations include:

• Efficient re-rendering with React.memo
• Optimized event handlers
• Lazy loading support for large datasets
• Minimal bundle size impact

Migration Notes

This is a maintenance release with full backward compatibility. No breaking changes were introduced:

1. Update your dependencies using the instructions above
2. No code changes required
3. All components and APIs remain unchanged
4. Test your application to benefit from improvements

Why Update?

Updating to CoreUI PRO for React v5.24.1 provides:

• Bug Fixes: Resolved issues and improved stability
• Performance: Better rendering and event handling
• TypeScript: Enhanced type definitions
• Advanced Calendar: Custom rendering and quarter selection
• Chip Components: Modern UI elements for tags and inputs
• Enterprise Features: Exclusive PRO components
• Support: Priority support for PRO customers
• Commercial License: Suitable for commercial projects

Use Cases

Calendar Enhancements

• Event Management: Display events, meetings, and appointments
• Booking Systems: Show availability and pricing
• Resource Scheduling: Visualize resource allocation
• Financial Applications: Quarter-based reporting and analysis

Chip Components

• Tag Management: Product tags, content categories
• Contact Lists: Email recipients, user selections
• Filter Display: Active filters in search interfaces
• Multi-Value Input: Keywords, labels, attributes

Getting Started

1. Update to CoreUI PRO for React v5.24.1
2. Explore the Calendar documentation
3. Try the Chip component and Chip Input
4. Check out live examples and code playgrounds

Additional Resources

• CoreUI PRO for React Documentation
• Calendar Component Guide
• Chip Components Guide
• Getting Started with CoreUI PRO
• All PRO Components
• Your PRO Account

Priority Support

As a PRO customer, you have access to priority support:

• Dedicated support team
• Faster response times
• Direct access to core developers
• Priority bug fixes
• Feature requests consideration

Visit CoreUI PRO Support for assistance.

For a comprehensive overview of all changes, please refer to the changelog on GitHub. For full v5.24.0 features, see CoreUI PRO for React v5.24.0 changelog.