system-components
Create consistent design-system-driven React UI components
Last updated 6 years ago by jxnblk .
MIT · Original npm · Tarball · package.json
$ npm install system-components 
SYNC missed versions from official npm registry.

system-components

Create consistent design-system-driven React UI components

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

Build Status

import system from 'system-components'

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

Or, to use with emotion:

import system from 'system-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.

const Card = system({
  px: 2,
  py: 3,
  borderWidth: 1,
  borderColor: 'lightGray',
  borderRadius: 2
})

The system function will automatically apply styled-system functions to the underlying styled-component based on the keys of the defaultProps object. System components also add prop type definitions and remove 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

System 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

System 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
})

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

System components are styled-components, so any of the built-in methods work as expected, including .extend.

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

const Bold = Text.extend`
  font-weight: bold;
`

Using with other CSS-in-JS libraries

The base System class can be used to create a system-components function for any CSS-in-JS library.

import { System } from 'system-components'
import cxs from 'cxs/component'

const system = new System({
  createComponent: type => (...args) => cxs(type)(...args)
})

export default system

MIT License

Current Tags

  • 2.1.0-0                                ...           alpha (6 years ago)
  • 3.0.3                                ...           latest (6 years ago)

23 Versions

  • 3.0.3 [deprecated]           ...           6 years ago
  • 3.0.2 [deprecated]           ...           6 years ago
  • 3.0.1 [deprecated]           ...           6 years ago
  • 3.0.0 [deprecated]           ...           6 years ago
  • 2.2.3 [deprecated]           ...           6 years ago
  • 2.2.2 [deprecated]           ...           6 years ago
  • 2.2.1 [deprecated]           ...           6 years ago
  • 2.2.0 [deprecated]           ...           6 years ago
  • 2.1.2 [deprecated]           ...           6 years ago
  • 2.1.1 [deprecated]           ...           6 years ago
  • 2.1.0 [deprecated]           ...           6 years ago
  • 2.1.0-0                                ...           6 years ago
  • 2.0.4 [deprecated]           ...           6 years ago
  • 2.0.3 [deprecated]           ...           7 years ago
  • 2.0.2 [deprecated]           ...           7 years ago
  • 2.0.1 [deprecated]           ...           7 years ago
  • 2.0.0 [deprecated]           ...           7 years ago
  • 1.1.3 [deprecated]           ...           7 years ago
  • 1.1.2 [deprecated]           ...           7 years ago
  • 1.1.1 [deprecated]           ...           7 years ago
  • 1.1.0 [deprecated]           ...           7 years ago
  • 1.0.1 [deprecated]           ...           7 years ago
  • 1.0.0 [deprecated]           ...           7 years ago
Maintainers (1)
Downloads
Total 3
Today 1
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dev Dependencies (13)
Dependents (2)

© 2010 - cnpmjs.org x YWFE | Home | YWFE