Migration 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.