| 1 |
|
| 2 | # v3
|
| 3 |
|
| 4 | Rebass v3 is a complete rewrite with the intent of making this UI component library useful to an even wider audience. Instead of trying to provide an off-the-shelf solution to styling UI, it tries to provide a solid base for extending these components into a highly customized UI component library. Rebass is intended to be useful in any React application and is so small it shouldn't make a huge impact on your overall bundle size.
|
| 5 |
|
| 6 | - Reduced package size (~1.17 kB)
|
| 7 | - Reduced number of components to 8
|
| 8 | - Updated for Styled Components v4 and Emotion v10
|
| 9 | - Reduced dependencies
|
| 10 | - Removed default theme and colors
|
| 11 | - Removed Provider component
|
| 12 | - Added variant theme support for Button and Card components
|
| 13 | - Removed `is` prop in favor of Styled Components' and Emotion's `as` prop
|
| 14 | - Uses Box component as base for all other components
|
| 15 | - Removed `css` prop in favor of Styled Components' and Emotion's implementations
|
| 16 |
|
| 17 | ## Migrating from v2 to v3
|
| 18 |
|
| 19 | Version 3 is a complete rewrite and *major* breaking change.
|
| 20 | It removes many of the components from the previous version to focus on a lighter, more generally useful set of 8 primitive components.
|
| 21 | If you've relied heavily on some of the Rebass v2 components that have been removed, you should **consider forking or copying and pasting components into your application where needed.**
|
| 22 | Alternatively there are other UI component libraries out there that can provide some of the same functionality from v2, such as [Reakit][].
|
| 23 |
|
| 24 | It is also intended for Styled Components v4 or Emotion v10 and some features will not work as expected with previous versions.
|
| 25 |
|
| 26 | Read more about the rationale here: rebassjs/rebass#474
|
| 27 |
|
| 28 | Use the following guide to upgrade to Rebass v3.
|
| 29 |
|
| 30 | ### 1. Install the latest versions of Styled Components or Emotion
|
| 31 |
|
| 32 | ```sh
|
| 33 | npm i styled-components@latest
|
| 34 | ```
|
| 35 |
|
| 36 | Or, if you're using emotion:
|
| 37 |
|
| 38 | ```sh
|
| 39 | npm i @emotion/core@latest @emotion/styled@latest
|
| 40 | ```
|
| 41 |
|
| 42 | ### 2. Replace v2 components
|
| 43 |
|
| 44 | The following components have been removed and should be replaced with custom implementations:
|
| 45 |
|
| 46 | - Base
|
| 47 | - CSS
|
| 48 | - Root
|
| 49 | - Provider
|
| 50 | - DarkMode
|
| 51 | - ButtonOutline
|
| 52 | - ButtonCircle
|
| 53 | - ButtonTransparent
|
| 54 | - NavLink
|
| 55 | - BlockLink
|
| 56 | - Close
|
| 57 | - Subhead
|
| 58 | - Caps
|
| 59 | - Small
|
| 60 | - Lead
|
| 61 | - Truncate
|
| 62 | - Truncate
|
| 63 | - Blockquote
|
| 64 | - Divider
|
| 65 | - Pre
|
| 66 | - Code
|
| 67 | - Samp
|
| 68 | - Measure
|
| 69 | - Label
|
| 70 | - Input
|
| 71 | - Select
|
| 72 | - Textarea
|
| 73 | - Radio
|
| 74 | - Checkbox
|
| 75 | - Slider
|
| 76 | - Switch
|
| 77 | - BackgroundImage
|
| 78 | - Avatar
|
| 79 | - Embed
|
| 80 | - Container
|
| 81 | - Group
|
| 82 | - Row
|
| 83 | - Column
|
| 84 | - Border
|
| 85 | - Panel
|
| 86 | - Progress
|
| 87 | - Banner
|
| 88 | - Message
|
| 89 | - Toolbar
|
| 90 | - Tabs
|
| 91 | - Tab
|
| 92 | - Badge
|
| 93 | - Circle
|
| 94 | - Dot
|
| 95 | - Arrow
|
| 96 | - Donut
|
| 97 | - Position
|
| 98 | - Relative
|
| 99 | - Absolute
|
| 100 | - Fixed
|
| 101 | - Sticky
|
| 102 | - Modal
|
| 103 | - Drawer
|
| 104 | - Carousel
|
| 105 | - Tooltip
|
| 106 | - Hide
|
| 107 |
|
| 108 | ### 3. Replace imports for the following
|
| 109 |
|
| 110 | If you've used any of the internal theme modules from Rebass, you will need to replace these with custom implementations:
|
| 111 |
|
| 112 | - `theme`
|
| 113 | - `colors`
|
| 114 | - `createColors`
|
| 115 | - `invertTheme`
|
| 116 |
|
| 117 | ### 4. Use a custom ThemeProvider
|
| 118 |
|
| 119 | Since Rebass v3 no longer includes a default theme, replace the Rebass Provider component with a ThemeProvider to apply a custom theme.
|
| 120 |
|
| 121 | ### 5. Replace the `is` prop with `as`
|
| 122 |
|
| 123 | ```jsx
|
| 124 | // v2
|
| 125 | <Box is='header' />
|
| 126 |
|
| 127 | // v3
|
| 128 | <Box as='header' />
|
| 129 | ```
|
| 130 |
|
| 131 | [reakit]: https://reakit.io
|