@andideve/react-styled-system v1.0.4

react-styled-system

Style props for building design systems with React @emotion

Installation

npm i @andideve/react-styled-system

Usage

import { system, createShouldForwardProp } from '@andideve/react-styled-system'
import styled from '@emotion/styled'

// Create a new parser
const scale = system({
  m: {
    property: 'margin',
    scale: 'space',
  },
  mx: {
    properties: ['marginRight', 'marginLeft'],
    scale: 'space',
  },
  my: {
    properties: ['marginTop', 'marginBottom'],
    scale: 'space',
  },
})

const shouldForwardProp = createShouldForwardProp(scale.propNames)

// Add parser to your component
const Box = styled('div', {
  shouldForwardProp,
})(scale)

// Provide value directly
<Box mx={32} />
// Or using theme, so theme.space.md
<Box mx='md' />

With multiple parsers

import { compose } from '@andideve/react-styled-system'

const color = system({
  bg: {
    property: 'backgroundColor',
    scale: 'colors',
  },
  color: {
    property: 'color',
    scale: 'colors',
  },
  // Shorthand definition
  opacity: true,
})

// Merged syled-system functions
const all = compose(scale, color)

const shouldForwardProp = createShouldForwardProp(all.propNames)

const Box = styled('div', {
  shouldForwardProp,
})(all)

<Box mx='md' bg='turquoise.400' />

Responsive Style Props

Set responsive styles with media queries.

// Array responsive styles
<Box mx={[8, null, 16]} />
// Object responsive styles
<Text fontSize={{ _: 16, 2: 32 }} />

Theming

See the Theming guide or read the docs.

import { ThemeProvider } from '@emotion/react'

const theme = {
  breakpoints: ['768px', '992px', '1200px'],
  space: {
    xxxs: 2,
    // ...
  },
  colors: {
    black: '#000000',
    white: '#ffffff',
    orange: {
      '50': '#fef5e7',
      // ...
    }
  },
}

render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
)

MIT License