Migration to v5

Track and review changes to the CoreUI for React.js components to help you migrate from v4 to v5.

CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also CoreUI 4 to 5 migration guide.

Components#

CAlertHeading#

• Breaking Renamed component property to as.

CAvatar#

• Removed textColor values: muted, high-emphasis, medium-emphasis, disabled, high-emphasis-inverse, medium-emphasis-inverse, disabled-inverse.
• New textColor values: primary-emphasis, secondary-emphasis, success-emphasis, danger-emphasis, warning-emphasis, info-emphasis, light-emphasis, body, body-emphasis, body-secondary, body-tertiary, black, black-50, white, white-50.

CBadge#

• Breaking Renamed component property to as.
• Deprecated textColor values: muted, high-emphasis, medium-emphasis, disabled, high-emphasis-inverse, medium-emphasis-inverse, disabled-inverse.
• New textColor values: primary-emphasis, secondary-emphasis, success-emphasis, danger-emphasis, warning-emphasis, info-emphasis, light-emphasis, body, body-emphasis, body-secondary, body-tertiary, black, black-50, white, white-50.

CButton#

• Breaking Renamed component property to as.
• Breaking The button doesn't have a default color anymore, you have to add color="primary"

CCard#

• Removed textColor values: muted, high-emphasis, medium-emphasis, disabled, high-emphasis-inverse, medium-emphasis-inverse, disabled-inverse.
• New textColor values: primary-emphasis, secondary-emphasis, success-emphasis, danger-emphasis, warning-emphasis, info-emphasis, light-emphasis, body, body-emphasis, body-secondary, body-tertiary, black, black-50, white, white-50.

CCardHeading#

• Breaking Renamed component property to as.

CCardImage#

• Breaking Renamed component property to as.

CCardSubtitle#

• Breaking Renamed component property to as.

CCardText#

• Breaking Renamed component property to as.

CCardTitle#

• Breaking Renamed component property to as.

CCloseButton#

• Deprecated property white, use dark instead of.

CDatePicker#

• Removed property format, use inputDateFormat instead of.

  // Previous markup
  <CDatePicker format="MMMM-dd-yyyy"/>
  
  // New markup
  import { format } from 'date-fns'
  //...
  <CDatePicker inputDateFormat={(date) => format(new Date(date), 'MMMM-dd-yyyy')} />

• onDateChange event return only the date object, instead of the date object and formatted string.

CDateRangePicker#

• Removed property format, use inputDateFormat instead of.

  // Previous markup
  <CDateRangePicker format="MMMM-dd-yyyy"/>
  
  // New markup
  import { format } from 'date-fns'
  //...
  <CDateRangePicker inputDateFormat={(date) => format(new Date(date), 'MMMM-dd-yyyy')} />

• onStartDateChange and onEndDateChange events return only the date object, instead of the date object and formatted string.

CDropdown#

• Breaking Renamed component property to as.

CDropdownHeader#

• Breaking Renamed component property to as.

CDropdownItem#

• Breaking Renamed component property to as.

CDropdownItemPlain#

• Breaking Renamed component property to as.

CDropdownMenu#

• Breaking Renamed component property to as.

CDropdownToggle#

• Breaking Renamed component property to as.

CFormFeedback#

• Breaking Renamed component property to as.

CFormText#

• Breaking Renamed component property to as.

CHeaderBrand#

• Breaking Renamed component property to as.

CHeaderNav#

• Breaking Renamed component property to as.

CInputGroupText#

• Breaking Renamed component property to as.

CLink#

• Breaking Renamed component property to as.

CListGroup#

• Breaking Renamed component property to as.

CListGroupItem#

• Breaking Renamed component property to as.

CModalTitle#

• Breaking Renamed component property to as.

CMultiSelect#

• Removed key text in the options list, use label instead

CNav#

• Breaking Renamed component property to as.
• Breaking The underline variant has been changed to underline-border

CNavbar#

• Breaking Renamed component property to as.

CNavbarBrand#

• Breaking Renamed component property to as.

CNavbarNav#

• Breaking Renamed component property to as.

CNavItem#

• Breaking Renamed component property to as.

CNavLink#

• Breaking Renamed component property to as.

CNavTitle#

• Breaking Renamed component property to as.

COffcanvasTitle#

• Breaking Renamed component property to as.

CPaginationItem#

• Breaking Renamed component property to as.

CPlaceholder#

• Breaking Renamed component property to as.

CSidebar#

• Breaking Sidebar has a light color scheme by default, use colorScheme="dark" to make it dark.

CSpinner#

• Breaking Renamed component property to as.

CToastClose#

• Breaking Renamed component property to as.
• Deprecated property white, use dark instead of.