Migrating to v2 - React-Bootstrap

React-Bootstrap v2 adds full compatibility with Bootstrap 5. Because Bootstrap 5 is a major rewrite of the project, there are significant breaking changes from ... MenuGettingstartedLayoutFormsComponentsUtilitiesMigratingAboutMigratingtov2React-Bootstrapv2addsfullcompatibilitywithBootstrap5.BecauseBootstrap5isamajorrewriteoftheproject,there aresignificantbreakingchangesfromReact-Bootstrapv1.PLEASEFIRSTREADTHEUPSTREAMBOOSTRAPMIGRATIONGUIDEhttps://v5.getbootstrap.com/docs/5.0/migrationReact-BootstraponlycontainscomponentsthatarepresentinvanillaBootstrap.Iffunctionality wasremovedfromBootstrap,thenitwasalsoremovedfromReact-Bootstrap.Thisguidedoesnot repeatinformationfoundintheupstreammigrationguide.ItsgoalistodocumentReact-Bootstrap-specific APIchangesandadditions.Versioning#WewillcontinuetoprovidegeneralmaintenanceforBootstrap4components,becausetherearemanyprojectsthatcontinuetodependonBootstrap4supportin react-bootstrap.react-bootstrappackageversionswillbeasfollows:Bootstrap3supportwillcontinueinreact-bootstrapversions=v1.0.0Bootstrap5supportwillbeinreact-bootstrapversions>=v2.0.0Wearenotcommittingtokeepingbreakingchangesinlockstepwithbootstrapsmajorreleases, theremaybeaReact-Bootstrapv3targetingBootstrap6dependingonwhat'sbestfortheproject.Summaryofbreakingchangesfromv1.x#BelowisaroughaccountofthebreakingAPIchangesaswellastheminimalchangetomigrateGeneral#React>=16.14.0isnowrequiredtosupportthenewJSXtransformAccordion#accordionisnolongercard-basedandhasbeenrewrittenwithdifferentmarkup.AccordionContext'svalueinterfacehaschanged.AccordionTogglehasbeenrenamedtoAccordionButton.useAccordionTogglehasbeenrenamedtouseAccordionButton.Badge#varianthasbeenrenamedtobg.ButtonGroup#removedtoggle.CardColumns#droppedCardColumns.CloseButton#Removedlabelpropinfavorofaria-label.Addedvariantprop.Col#ColOrderisnowmaximum5insteadof12.Whenusingobjectsinbreakpointprops,spanisnolongertruebydefault.Dropdown#dropdowndividersusehrbydefaultinsteadofdiv.Alignmentvaluesleftandrightchangedtostartandendrespectively.RemovedalignRight.Usealign="end"instead.DropdownButton#RemovedmenuAlignpropinfavorofalign.DropdownItem#removedonSelect.UseonSelectintheparentDropdowninstead.DropdownMenu#RemovedalignRight.Usealign="end"instead.Form#removedinline.removedbsPrefix.FormCheck#removedbsCustomPrefixandcustominfavorofbsSwitchPrefix.feedbacktypeisnowcontrolledbyfeedbackTypeinsteadofisValidandisInvalid.FormCheckInput#removedbsCustomPrefix.removedisStatic.FormCheckLabel#removedbsCustomPrefix.changedbaseclassfromform-check-inputtoform-check-label.FormControl#droppedaspropsupportingselecttagsinfavorofFormSelect.removedcustom.removedbsCustomPrefix.droppedsupportfortypesupportingtherangevalueinfavorofFormRange.addcolorpickerFormFile#droppedallfile-relatedcomponents.Useinstead.FormGroup#removedbsPrefix.The.form-groupclassisnolongersupportedinBootstrap, butthiscomponentisusefulforpassingcontrolIdtolabelsandinputs.Tohandle spacing,usemarginutilitiesinstead.FormRow#removed.UseRowinstead.InputGroup#droppedInputGroupPrependandInputGroupAppend.ButtonsandInputGroupTextcannowbeaddedasdirectchildren.Nav#keyboardnavigationhasbeenremoved.Ifyouneedthis,useTabsinstead.NavLink#removedonSelect.UseonSelectintheparentNavinstead.Popover#renamedcontentproptobodytocoincidewithPopoverContentcomponentnamechange.PopoverContent#renamedtoPopoverBodytomatchclassname.PopoverTitle#renamedtoPopoverHeadertomatchclassname.ResponsiveEmbed#renamedtoRatio.aspectRatiooptionschangedto'1x1'|'4x3'|'16x9'|'21x9'.SafeAnchor#renamedtoAnchor.SplitButton#RemovedmenuAlignpropinfavorofalign.Toast#delayisnowdefault5000ms.ToggleButton#addbsPrefix.idisnowrequired.ThisistoallowtogglingoftheinputduetomarkupchangesinBootstrap.