|
1 | | -# Migrating to v1 |
| 1 | +# Migrating to v2 |
2 | 2 |
|
3 | | -React Bootstrap v1 adds full compatibility with Bootstrap 4. Because bootstrap 4 is a major rewrite of the project there |
4 | | -are significant breaking changes from the pre `v1` react-bootstrap. |
| 3 | +React Bootstrap v2 adds full compatibility with Bootstrap 5. Because bootstrap 5 is a major rewrite of the project there |
| 4 | +are significant breaking changes from v1 React Bootstrap. |
5 | 5 |
|
6 | 6 | **PLEASE FIRST READ THE UPSTREAM BOOSTRAP MIGRATION GUIDE** |
7 | 7 |
|
8 | | -> https://getbootstrap.com/docs/4.3/migration/ |
| 8 | +> https://v5.getbootstrap.com/docs/5.0/migration |
9 | 9 |
|
10 | | -React-Bootstrap _only_ contains components that are present in vanilla Bootstrap. If functionality |
| 10 | +React Bootstrap _only_ contains components that are present in vanilla Bootstrap. If functionality |
11 | 11 | was removed from Bootstrap, then it was also removed from React-Bootstrap. This guide does not |
12 | | -repeat information found in the upstream migration guide. Its goal is to document React-Bootstrap-specific |
| 12 | +repeat information found in the upstream migration guide. Its goal is to document React Bootstrap-specific |
13 | 13 | API changes and additions. |
14 | 14 |
|
15 | 15 | ## Versioning |
16 | 16 |
|
17 | | -We will continue to provide general maintenance for Bootstrap 3 components, because there are many projects that continue to depend on Bootstrap 3 support in |
| 17 | +We will continue to provide general maintenance for Bootstrap 4 components, because there are many projects that continue to depend on Bootstrap 4 support in |
18 | 18 | `react-bootstrap`. `react-bootstrap` package versions will be as follows: |
19 | 19 |
|
20 | 20 | - Bootstrap 3 support will continue in react-bootstrap versions < `v1.0.0` |
21 | 21 | - Bootstrap 4 support will be in react-bootstrap versions >= `v1.0.0` |
| 22 | +- Bootstrap 5 support will be in react-bootstrap versions >= `v2.0.0` |
22 | 23 |
|
23 | 24 | We are **not** committing to keeping breaking changes in lockstep with bootstraps major releases, |
24 | | -there may be a react-bootstrap v2 targeting Bootstrap v4 depending on what's best for the project. |
| 25 | +there may be a react-bootstrap v3 targeting Bootstrap 6 depending on what's best for the project. |
25 | 26 |
|
26 | | -## Summary of breaking changes from v0.32.0 |
| 27 | +## Summary of breaking changes from v1.0.0 |
27 | 28 |
|
28 | 29 | Below is a _rough_ account of the breaking API changes as well as the minimal change to migrate |
29 | 30 |
|
30 | | -- `bsStyle` -> `variant` |
31 | | -- `bsClass` -> `bsPrefix` |
32 | | -- `bsRole` has been removed from all components. Components now communicate |
33 | | - via context to allow intermediate nesting of child components |
34 | | -- `componentClass` -> `as` |
35 | | -- All utils have been removed from main exports, most were internal already and the rest have been moved to external libraries |
| 31 | +### FormCheck |
36 | 32 |
|
37 | | -### Grid |
| 33 | +- deprecated `bsCustomPrefix` and `custom` in favor of `bsSwitchPrefix`. |
38 | 34 |
|
39 | | -- renamed to Container |
40 | | -- removed Clearfix |
| 35 | +#### FormCheckInput |
41 | 36 |
|
42 | | -#### Col |
| 37 | +- removed `bsCustomPrefix`. |
| 38 | +- removed `isStatic`. |
43 | 39 |
|
44 | | -- removed visibility props |
45 | | -- consolidated col `span`, `offset`, and `order` into an object value prop per breakpoint. |
| 40 | +#### FormCheckLabel |
46 | 41 |
|
47 | | -### Navbar |
| 42 | +- removed `bsCustomPrefix`. |
| 43 | +- changed base class from `form-check-input` to `form-check-label`. |
48 | 44 |
|
49 | | -- removed `Navbar.Header` |
50 | | -- removed `Navbar.Form` |
51 | | -- removed `fluid`, use your own `Container` component in. |
52 | | -- `inverse` removed and replaced with `variant="dark"` |
53 | | -- positioning props have been consolidated into `fixed={top|bottom}` and `sticky={top|bottom}`, staticTop has been removed |
| 45 | +### FormControl |
54 | 46 |
|
55 | | -#### NavbarHeader |
56 | | - |
57 | | -- removed, not present in v4 |
58 | | - |
59 | | -#### NavbarToggle |
60 | | - |
61 | | -- name changed to `Navbar.Toggle` |
62 | | - |
63 | | -#### NavbarBrand |
64 | | - |
65 | | -- Renders a `<a>` when an `href` is provided |
66 | | -- The presence of `children` does not skip the wrapping `span`, use `as` along with `children` for custom rendering |
67 | | - |
68 | | -### Nav |
69 | | - |
70 | | -- `activeHref` is removed (only activeKey now) |
71 | | -- `bsStyle` renamed to `variant` |
72 | | -- NavLink hrefs will be used as `eventKey`s when `eventKey` is absent |
73 | | -- Local `onSelect` handlers are ignored when in the context of a TabContainer or Navbar (MAYBE ADD BACK?) |
74 | | - |
75 | | -#### Nav.Item |
76 | | - |
77 | | -- Renders _only_ the outer "item" element, use inconjunction with the new `NavLink` component |
78 | | -- default element changed to `<div>` from a `<li>` |
79 | | -- `active` prop removed and moved to `NavLink` |
80 | | - |
81 | | -### InputGroup |
82 | | - |
83 | | -- removed InputGroup.Button, and InputGroup.Addon |
84 | | -- added InputGroup.Prepend, InputGroup.Append, InputGroup.Text, InputGroup.Checkbox, InputGroup.Radio |
85 | | - |
86 | | -### Badge & Label |
87 | | - |
88 | | -- removed `Label`, the `Badge` component covers both |
89 | | -- `bsStyle` renamed to `variant` |
90 | | - |
91 | | -### Panel |
92 | | - |
93 | | -- removed, replaced with Card components |
94 | | - |
95 | | -### Dropdown |
96 | | - |
97 | | -- Removed the `disabled` prop on Dropdown, pass it directly to Dropdown.Toggle |
98 | | -- Removed bsRole, use function children to render custom Toggles or Menus |
99 | | -- Removed SplitButton.toggle (replaced with a `split` prop on the basic Toggle) |
100 | | -- `noCaret` is removed because it's not optional with the styles anymore |
101 | | -- bsPrefixes are not passed from the parent Dropdown anymore |
102 | | -- onSelect behavior is now passed to Menu and Toggle via the Context api |
103 | | -- DropdownMenu is not rendered until opened |
104 | | -- `divider` has been split out into `Dropdown.Divider` |
105 | | -- `header` has been split out into `Dropdown.Header` |
106 | | - |
107 | | -#### DropdownButton |
108 | | - |
109 | | -- Extra props are passed to the underlying Dropdown component, not the Toggle. |
110 | | - |
111 | | -#### SplitButton |
112 | | - |
113 | | -- Extra props are passed to the underlying Dropdown component, not the Toggle. |
114 | | - |
115 | | -### NavButton |
116 | | - |
117 | | -- Extra props are passed to the underlying Dropdown component, not the Toggle. |
118 | | - |
119 | | -#### MenuItem |
120 | | - |
121 | | -- renamed to `DropdownItem` (also exported on `Dropdown` as `Dropdown.Item`) |
122 | | - |
123 | | -### Alert |
124 | | - |
125 | | -- `onDismiss` renamed to `onClose` |
126 | | - |
127 | | -### Well |
128 | | - |
129 | | -- removed. |
130 | | - |
131 | | -### Pager |
132 | | - |
133 | | -- removed. |
134 | | - |
135 | | -### ControlLabel |
136 | | - |
137 | | -- renamed to `FormLabel` (also exported on `Form` as `Form.Label`) |
138 | | - |
139 | | -### Checkbox and Radio |
140 | | - |
141 | | -- Consolidated into a single component. Component's name is `FormCheck` (also exported on `Form` as `Form.Check`) |
142 | | - |
143 | | -### Glyphicon |
144 | | - |
145 | | -- Removed -- icons are not included in Bootstrap 4. Icon support can be provided via react-icons, fontawesome, or a similar external library. |
| 47 | +- dropped `as` prop supporting `select` tags in favor of FormSelect. |
| 48 | +- removed `custom`. |
| 49 | +- removed `bsCustomPrefix`. |
| 50 | +- dropped support for `type` supporting the `range` value in favor of FormRange. |
0 commit comments