I recently read about an interesting UI library called Rebass for creating set of customizable UI elements which are based on the Styled System library. It gives the ability for React components to render to the canvas rather than the DOM. containing eight foundational components which styled-system, they allow the extension of custom UI components into your app with the ThemeProvider. This also reduces to need to write custom CSS in apps.
Installation
Install the core Rebass library:
npm i rebass
Usage
ThemeProvider
Rebass components are stylistically unopinionated and do not include a theme by default You can add a theme to your application with a ThemeProvider component and by providing a theme in context. This example uses the Emotion ThemeProvider with the Rebass preset theme.
npm i @rebass/preset emotion-theming
Then wrap with the ThemeProvider component:
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import theme from '@rebass/preset'
export default props =>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
Theming
You can use the default Rebass theme or completely customize the look and feel with a custom theme. Rebass follows the Theme Specification, so any theme built for use with Theme UI or Styled System will work out-of-the-box.
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
const theme = {
fontSizes: [
12, 14, 16, 24, 32, 48, 64
],
colors: {
primary: '#07c',
gray: '#f6f6ff',
},
buttons: {
primary: {
color: 'white',
bg: 'primary',
},
outline: {
color: 'primary',
bg: 'transparent',
boxShadow: 'inset 0 0 0 2px'
},
},
}
export default props =>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
Card Composite Component
Here is an example of a card box component
<Box width={256}>
<Card
sx={{
p: 1,
borderRadius: 2,
boxShadow: '0 0 16px rgba(0, 0, 0, .25)',
}}>
<Image src={props.image} />
<Box px={2}>
<Heading as='h3'>
Card Demo
</Heading>
<Text fontSize={0}>
You can edit this code
</Text>
</Box>
</Card>
</Box>
This is just a brief dive into Rebass. On the official site, you can look at how to customize props, images, buttons etc.
References
Top comments (0)