Rebass Intro

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

• https://rebassjs.org/
• https://github.com/rebassjs/rebass