React primitive UI components built with styled-system.
MIT License
Bot releases are visible (Hide)
See the Migration Guide for updating from v3
Published by jxnblk almost 6 years ago
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.
is
prop in favor of Styled Components' and Emotion's as
propcss
prop in favor of Styled Components' and Emotion's implementationsVersion 3 is a complete rewrite and major breaking change. It removes many of the components from the previous version to focus on a lighter, more generally useful set of 8 primitive components. 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. Alternatively there are other UI component libraries out there that can provide some of the same functionality from v2, such as Reakit.
It is also intended for Styled Components v4 or Emotion v10 and some features will not work as expected with previous versions.
Read more about the rationale here: rebassjs/rebass#474
Use the following guide to upgrade to Rebass v3.
npm i styled-components@latest
Or, if you're using emotion:
npm i @emotion/core@latest @emotion/styled@latest
The following components have been removed and should be replaced with custom implementations:
If you've used any of the internal theme modules from Rebass, you will need to replace these with custom implementations:
theme
colors
createColors
invertTheme
Since Rebass v3 no longer includes a default theme, replace the Rebass Provider component with a ThemeProvider to apply a custom theme.
is
prop with as
// v2
<Box is='header' />
// v3
<Box as='header' />
Published by jxnblk over 6 years ago
colors
object no longer uses Palxradius
has been replaced with radii
font
has been replaced with fonts
monospace
has been removedwidth
is only available on Flex and BoxfontSize
is only available on typographic componentsdirection
is now flexDirection
align
is now alignItems
justify
is now justifyContent
wrap
is now flexWrap
up
is now direction='up'
active
props have been removed in favor of custom stylesimage
is now backgroundImage
top
, right
, bottom
, and left
propsposition
prop has been renamed to side
size
prop has been replaced with width
and height
propshoc
createLibrary
functionutil
createComponent
Published by jxnblk over 6 years ago
Refactored code base, using the latest styled-system and grid-styled
util
hoc
createComponent
createLibrary
colors
object no longer uses Palxradius
has been replaced with radii
font
has been replaced with fonts
monospace
has been removedwidth
is only available on Flex and BoxfontSize
is only available on typographic componentsdirection
is now flexDirection
align
is now alignItems
justify
is now justifyContent
wrap
is now flexWrap
up
is now direction='up'
active
props have been removed in favor of custom stylesimage
is now backgroundImage
top
, right
, bottom
, and left
props