$ npm install system-components
Create consistent design-system-driven React UI components
Built with styled-system, with support for styled-components & emotion
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'
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.
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'
/>
Custom style functions can be passed as an argument.
const Box = system(
props => ({
height: props.height
})
)
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>
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;
`
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
© 2010 - cnpmjs.org x YWFE | Home | YWFE