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 alsoCoreUI 4 to 5 migration guide.

Components#

CAlertHeading#

• Breaking Renamedcomponent property toas.

CAvatar#

• RemovedtextColor values:muted,high-emphasis,medium-emphasis,disabled,high-emphasis-inverse,medium-emphasis-inverse,disabled-inverse.
• NewtextColor 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 Renamedcomponent property toas.
• DeprecatedtextColor values:muted,high-emphasis,medium-emphasis,disabled,high-emphasis-inverse,medium-emphasis-inverse,disabled-inverse.
• NewtextColor 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 Renamedcomponent property toas.
• Breaking The button doesn't have a default color anymore, you have to addcolor="primary"

CCard#

• RemovedtextColor values:muted,high-emphasis,medium-emphasis,disabled,high-emphasis-inverse,medium-emphasis-inverse,disabled-inverse.
• NewtextColor 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 Renamedcomponent property toas.

CCardImage#

• Breaking Renamedcomponent property toas.

CCardSubtitle#

• Breaking Renamedcomponent property toas.

CCardText#

• Breaking Renamedcomponent property toas.

CCardTitle#

• Breaking Renamedcomponent property toas.

CCloseButton#

• Deprecated propertywhite, usedark instead of.

CDatePicker#

• Removed propertyformat, useinputDateFormat instead of.

  // Previous markup
  <CDatePickerformat="MMMM-dd-yyyy"/>
  // New markup
  import{ format}from'date-fns'
  //...
  <CDatePickerinputDateFormat={(date)=>format(newDate(date),'MMMM-dd-yyyy')}/>

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

CDateRangePicker#

• Removed propertyformat, useinputDateFormat instead of.

  // Previous markup
  <CDateRangePickerformat="MMMM-dd-yyyy"/>
  // New markup
  import{ format}from'date-fns'
  //...
  <CDateRangePickerinputDateFormat={(date)=>format(newDate(date),'MMMM-dd-yyyy')}/>

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

CDropdown#

• Breaking Renamedcomponent property toas.

CDropdownHeader#

• Breaking Renamedcomponent property toas.

CDropdownItem#

• Breaking Renamedcomponent property toas.

CDropdownItemPlain#

• Breaking Renamedcomponent property toas.

CDropdownMenu#

• Breaking Renamedcomponent property toas.

CDropdownToggle#

• Breaking Renamedcomponent property toas.

CFormFeedback#

• Breaking Renamedcomponent property toas.

CFormText#

• Breaking Renamedcomponent property toas.

CHeaderBrand#

• Breaking Renamedcomponent property toas.

CHeaderNav#

• Breaking Renamedcomponent property toas.

CInputGroupText#

• Breaking Renamedcomponent property toas.

CLink#

• Breaking Renamedcomponent property toas.

CListGroup#

• Breaking Renamedcomponent property toas.

CListGroupItem#

• Breaking Renamedcomponent property toas.

CModalTitle#

• Breaking Renamedcomponent property toas.

CMultiSelect#

• Removed keytext in the options list, uselabel instead

CNav#

• Breaking Renamedcomponent property toas.
• Breaking Theunderline variant has been changed tounderline-border

CNavbar#

• Breaking Renamedcomponent property toas.

CNavbarBrand#

• Breaking Renamedcomponent property toas.

CNavbarNav#

• Breaking Renamedcomponent property toas.

CNavItem#

• Breaking Renamedcomponent property toas.

CNavLink#

• Breaking Renamedcomponent property toas.

CNavTitle#

• Breaking Renamedcomponent property toas.

COffcanvasTitle#

• Breaking Renamedcomponent property toas.

CPaginationItem#

• Breaking Renamedcomponent property toas.

CPlaceholder#

• Breaking Renamedcomponent property toas.

CSidebar#

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

CSpinner#

• Breaking Renamedcomponent property toas.

CToastClose#

• Breaking Renamedcomponent property toas.
• Deprecated propertywhite, usedark instead of.