jsx-to-styled v1.5.3

📝 What it is ?

Inspired by xstyled and styled-system, jsx-to-styled adds styled props to your React styled-components. The main idea of this library is to stay really simple and performant.

All styled props injected by jsx-to-styled are prefixed by $ symbol to prevent forwarding props to html element, check the styled-components transiant props section for more informations.

🔧 Installation

You must have react and styled-components already installed

npm i jsx-to-styled
# or
yarn add jsx-to-styled

💻 Usage

You can use jsx-to-styled without theme (codesandbox example)

import styled from 'styled-components'
import system from 'jsx-to-styled'

// create your styled component with system props
const Box = styled.div(system)

// now you can use all jsx-to-styled props
return (
  <Box $color="white" $backgroundColor="tomato" $p="30px" $borderRadius="50%">
    Hello World!
  </Box>
)

Or use with a theme to use custom values (codesandbox example)

import styled, { ThemeProvider } from 'styled-components'
import system from 'jsx-to-styled'

// create your styled component with system props
const Box = styled.div(system)

// create your theme
const theme = {
  colors: {
    primary: 'white',
    secondary: 'tomato',
  },
  spaces: {
    xl: '30px',
  },
  radii: {
    half: '50%',
  },
}

// now you can use all jsx-to-styled props with theme values
return (
  <ThemeProvider theme={theme}>
    <Box $color="primary" $backgroundColor="secondary" $p="xl" $borderRadius="half">
      Hello World!
    </Box>
  </ThemeProvider>
)

✨ Typescript

Thanks to csstype, jsx-to-styled is fully typed. You will have autocomplete for all possible css values.

import system, { SystemProps } from 'jsx-to-styled'

// don't forget to add SystemProps type to your styled-component definition
const Box = styled.div<SystemProps>(system)

If you want to access to your theme values, you have to redefine "Theme" interface with your custom theme like that:

// theme.d.ts
import 'jsx-to-styled'
import { theme } from './theme'

type MyTheme = typeof theme

declare module 'jsx-to-styled' {
  export interface Theme extends MyTheme {}
}

📱 Responsive (breakpoints)

You can use breakpoints in your styled props (codesandbox example)

// add "breakpoints" key in your theme
const theme = {
  colors: {
    primary: 'white',
    secondary: 'tomato',
  },
  breakpoints: {
    sm: '600px',
  },
}

// flexDirection will be "column" by default and "row" on screens > 600px
return (
  <Box $display="flex" $flexDirection={{ _: 'column', sm: 'row' }}>
    <Box>A</Box>
    <Box>B</Box>
  </Box>
)

🍱 States

You can use states in your styled props (codesandbox example)

// add "states" key in your theme
const theme = {
  colors: {
    primary: 'white',
    secondary: 'tomato',
  },
  states: {
    hover: '&:hover',
  },
}

// color will be "white" by default and "tomato" on hover
return <Box $color={{ _: 'primary', hover: 'secondary' }}>Hello World!</Box>

📕 Props

System is composed by all of props below

Background

Border

Color

Flex

Grid

Layout

Position

Space

Typography

Other