Create consistent styled-system based React UI components
Branch: master
Clone or download
Pull request Compare This branch is even with rebassjs:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
.babelrc
.gitignore
.npmignore
.travis.yml
LICENSE.md
README.md
build-docs.js
emotion.js
package-lock.json
package.json
test.js

README.md

@rebass/components

Create consistent styled-system based React UI components (formerly system-components)

Built with styled-system, with support for styled-components & emotion

Build Status

import system from '@rebass/components'

// creates a Box with default props tied to your theme
const Box = system({
  p: 2,
  bg: 'blue'
}, 'space', 'color')

Or, to use with emotion:

import system from '@rebass/components/emotion'

Usage

To create a styled-component with default props that hook into styled-system props, pass a plain object as the first argument to the system function and pass the names of the styled-system functions as arguments after.

const Card = system({
  px: 2,
  py: 3,
  border: '1px solid',
  borderColor: 'lightGray',
  borderRadius: 2
}, 'space', 'borders', 'borderColor', 'borderRadius')

@rebass/components automatically adds prop type definitions and removes style props from the underlying HTML element.

See the styled-system docs for a complete list of the available style functions.

Add style props without defaultProps

@rebass/components can also be created with styled-system props without defining defaultProps.

const Box = system(
  'space',
  'width',
  'color'
)

This allows for style props to be passed to the component instance:

<Box
  width={1/2}
  px={3}
  py={4}
  bg='blue'
/>

Using custom functions

Custom style functions can be passed as an argument.

const Box = system(
  props => ({
    height: props.height
  })
)

Changing the underlying HTML element

@rebass/components default to using a <div> as the HTML element. To change the HTML element use the is prop.

const Heading = system({
  is: 'h2',
  m: 0,
  fontSize: 6
}, 'space', 'fontSize')

Since is is a prop, it can also be passed to the element when used. This is useful for one-off changes to ensure semantic markup.

<Heading is='h1'>
  Hello
</Heading>

Extending components

To extend another component, use the extend prop in your component definition.

const Text = system({
  fontSize: 2,
}, 'fontSize')

const Bold = system({
  extend: Text,
  fontWeight: 'bold'
}, 'fontWeight')

CSS prop

To add one-off custom CSS to any @rebass/component, use the css prop.

<Heading css='opacity:0.75;'>
  Hello
</Heading>

The css prop can also accept object literal syntax.

<Heading
  css={{
    opacity: 3/4
  }}>
  Hello
</Heading>

MIT License