jsx-to-styled adds styled props to your React components
📝 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
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'
const Box = styled.div(system)
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'
const Box = styled.div(system)
const theme = {
colors: {
primary: 'white',
secondary: 'tomato',
},
spaces: {
xl: '30px',
},
radii: {
half: '50%',
},
}
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'
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:
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)
const theme = {
colors: {
primary: 'white',
secondary: 'tomato',
},
breakpoints: {
sm: '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)
const theme = {
colors: {
primary: 'white',
secondary: 'tomato',
},
states: {
hover: '&:hover',
},
}
return <Box $color={{ _: 'primary', hover: 'secondary' }}>Hello World!</Box>
📕 Props
System is composed by all of props below
Background
JSX Property | CSS property | Theme key |
---|
$background | background | |
$backgroundImage | background-image | |
$backgroundSize | background-size | |
$backgroundPosition | background-position | |
$backgroundRepeat | background-repeat | |
Border
JSX Property | CSS property | Theme key |
---|
$border | border | |
$borderWidth | border-width | borderWidths |
$borderStyle | border-style | |
$borderColor | border-color | colors |
$borderRadius | border-radius | radii |
$borderTop | border-top | |
$borderTopWidth | border-top-width | borderWidths |
$borderTopStyle | border-top-style | |
$borderTopColor | border-top-color | colors |
$borderTopLeftRadius | border-top-left-radius | radii |
$borderTopRightRadius | border-top-right-radius | radii |
$borderRight | border-right | |
$borderRightWidth | border-right-width | borderWidths |
$borderRightStyle | border-right-style | |
$borderRightColor | border-right-color | colors |
$borderBottom | border-bottom | |
$borderBottomWidth | border-bottom-width | borderWidths |
$borderBottomStyle | border-bottom-style | |
$borderBottomColor | border-bottom-color | colors |
$borderBottomLeftRadius | border-bottom-left-radius | radii |
$borderBottomRightRadius | border-bottom-right-radius | radii |
$borderLeft | border-left | |
$borderLeftWidth | border-left-width | borderWidths |
$borderLeftStyle | border-left-style | |
$borderLeftColor | border-left-color | colors |
Color
JSX Property | CSS property | Theme key |
---|
$backgroundColor | background-color | colors |
$color | color | colors |
$opacity | opacity | |
Flex
JSX Property | CSS property | Theme key |
---|
$flex | flex | |
$alignContent | align-content | |
$alignItems | align-items | |
$alignSelf | align-self | |
$justifyContent | justify-content | |
$justifyItems | justify-items | |
$justifySelf | justify-self | |
$flexBasis | flex-basis | |
$flexDirection | flex-direction | |
$flexGrow | flex-grow | |
$flexShrink | flex-shrink | |
$flexWrap | flex-wrap | |
$order | order | |
Grid
JSX Property | CSS property | Theme key |
---|
$gap | gap | spaces |
$columnGap | column-gap | spaces |
$rowGap | row-gap | spaces |
$gridColumn | grid-column | |
$gridRow | grid-row | |
$gridArea | grid-area | |
$gridAutoFlow | grid-auto-flow | |
$gridAutoColumns | grid-auto-columns | |
$gridAutoRows | grid-auto-rows | |
$gridTemplateColumns | grid-template-columns | |
$gridTemplateRows | grid-template-rows | |
$gridTemplateAreas | grid-template-areas | |
Layout
JSX Property | CSS property | Theme key |
---|
$w | width | sizes |
$h | height | sizes |
$minW | min-width | sizes |
$maxW | max-width | sizes |
$minH | min-height | sizes |
$maxH | max-height | sizes |
$display | display | |
$verticalAlign | vertical-align | |
$overflow | overflow | |
$overflowX | overflow-x | |
$overflowY | overflow-y | |
Position
JSX Property | CSS property | Theme key |
---|
$position | position | |
$zIndex | z-index | |
$top | op | spaces |
$right | right | spaces |
$bottom | bottom | spaces |
$left | left | spaces |
Space
JSX Property | CSS property | Theme key |
---|
$m | margin | spaces |
$mt | margin-top | spaces |
$mr | margin-right | spaces |
$mb | margin-bottom | spaces |
$ml | margin-left | spaces |
$my | margin-top, margin-bottom | spaces |
$mx | margin-right, margin-left | spaces |
$p | padding | spaces |
$pt | padding-top | spaces |
$pr | padding-right | spaces |
$pb | padding-bottom | spaces |
$pl | padding-left | spaces |
$py | padding-top, padding-bottom | spaces |
$px | padding-right, padding-left | spaces |
Typography
JSX Property | CSS property | Theme key |
---|
$fontFamily | font-family | fonts |
$fontSize | font-size | fontSizes |
$fontWeight | font-weight | fontWeights |
$lineHeight | line-height | lineHeights |
$letterSpacing | line-spacing | letterSpacings |
$textAlign | text-align | |
$fontStyle | font-style | |
$textDecoration | text-decoration | |
$textTransform | text-transform | |
Other
JSX Property | CSS property | Theme key |
---|
$cusor | cursor | |
$float | float | |
$objectFit | object-fit | |
$objectPosition | object-position | |
$transform | transform | |
$visibility | visibility | |