❤
npm
Sign UpSign In

@chengsokdara/styled-props
TypeScript icon, indicating that this package has built-in type declarations

0.0.9 • Public • Published

Styled Props for React Native

Styling React Native component like it is TailwindCSS.

Installation

npm install @chengsokdara/styled-props --save
yarn add @chengsokdara/styled-props

Getting Start

What styled-props can do?

1. inject styler into custom view

import {
  injectStyles,
  // import styles you want to inject
  backgroundStyle,
  flexStyle,
} from '@chengsokdara/styled-props'

// Create custom view by injecting styles
const CustomView = (props) => {
  const styles = injectStyles([backgroundStyle, flexStyle], props)

  return <View style={[props.style, styles]} />
}

2. use custom view with custom props

import { CustomView } from 'your-custom-view-path'

// Usage examples
const App = () => {
  const [bg, setBg] = useState('red')
  return (
    {/* When style value a static */}
    <CustomView bg-00DDFF flex-1>
      {/* When style value are dynamic*/}
      <CustomView bg={bg} />
    </CustonView>
  )
}

API

  • alignContent
prop name style name value type example
content alignContent string content={'between'}
content-value alignContent string content-between

content-value: start | end | center | between | around | evenly

  • alignItems
prop name style name value type example
items alignItems string items={'center'}
items-value alignItems string items-center

items-value: start | end | center | baseline | stretch

  • alignSelf
prop name style name value type example
self alignSelf string self={'stretch'}
self-value alignSelf string self-stretch

self-value: start | end | center | baseline | stretch

  • backgroundStyle
prop name style name value type example
bg backgroundColor string bg={'red'}
bg-hex backgroundColor string bg-FF0000

bg-hex: bg-FF0000 will be converted to backgroundColor: "#FF0000"

  • borderStyle
prop name style name value type example
bc borderColor string bc={'red'}
bc-hex borderColor string bc-FF0000
bcb borderColorBottom string bcb={'red'}
bcb-hex borderColorBottom string bcb-FF0000
bcl borderColorLeft string bcl={'red'}
bcl-hex borderColorLeft string bcl-FF0000
bcr borderColorRight string bcr={'red'}
bcr-hex borderColorRight string bcr-FF0000
bct borderColorTop string bct={'red'}
bct-hex borderColorTop string bct-FF0000
br borderRadius number br={4}
br-value borderRadius number br-4
brb borderRadiusBottom number brb={4}
brb-value borderRadiusBottom number brb-4
brbl borderRadiusBottomLeft number brbl={4}
brbl-value borderRadiusBottomLeft number brbl-4
brbr borderRadiusBottomRight number brbr={4}
brbr-value borderRadiusBottomRight number brbr-4
brl borderRadiusLeft number brl={4}
brl-value borderRadiusLeft number brl-4
brr borderRadiusRight number brr={4}
brr-value borderRadiusRight number brr-4
brt borderRadiusTop number brt={4}
brt-value borderRadiusTop number brt-4
brtl borderRadiusTopLeft number brtl={4}
brtl-value borderRadiusTopLeft number brtl-4
brtr borderRadiusTopRight number brtr={4}
brtr-value borderRadiusTopRight number brtr-4
bs borderStyle string bs={'solid'}
bs-value borderStyle string bs-solid
bw borderWidth number bw={1}
bw-value borderWidth number bw-1
bwb borderWidthBottom number bwb={1}
bwb-value borderWidthBottom number bwb-1
bwl borderWidthLeft number bwl={1}
bwl-value borderWidthLeft number bwl-1
bwr borderWidthRight number bwr={1}
bwr-value borderWidthRight number bwr-1
bwt borderWidthTop number bwt={1}
bwt-value borderWidthTop number bwt-1

bs-value: solid | dotted | dashed

  • colorStyle
prop name style name value type example
color color string color={'blue'}
color-value color string color-0000FF

color-hex: color-0000FF will be converted to color: "#0000FF"

  • flexAlignment
prop name style name value type example
center alignItems
justifyContent		 boolean center
center-value alignItems
justifyContent		 boolean center
items alignItems string items={'center'}
items-value alignItems string items-center
justify justifyContent string self={'stretch'}
justify-value justifyContent string self-stretch

items-value: start | end | center | baseline | stretch

justify-value: start | end | center | between | around | evenly

  • flexDirection
prop name style name value type example
col flexDirection boolean col
row flexDirection boolean row
  • flexGrow
prop name style name value type example
grow flexGrow boolean grow
grow-0 flexGrow boolean grow-o
grow-value flexGrow number grow-1
  • flexStyles
prop name style name value type example
basis flexBasis number,string basis={168}
basis-value flexBasis string basis-168
flex flex number flex={1}
flex-value flex number flex-1
flex-nowrap flexWrap boolean flex-nowrap
flex-reverse flexWrap boolean flex-reverse
flex-wrap flexWrap boolean flex-wrap
grow flexGrow boolean grow
grow-0 flexGrow boolean grow-o
grow-value flexGrow number grow-1
shrink flexShrink boolean shrink
shrink-0 flexShrink boolean shrink-o
shrink-value flexShrink number shrink-1

basis-value: basis-100pct will be converted to flexBasis: "100%"

flex-nowrap will be converted to flexWrap: 'nowrap'

flex-reverse will be converted to flexWrap: 'reverse'

flex-wrap will be converted to flexWrap: 'wrap'

  • flexboxStyles

prop name style name value type example
basis flexBasis number,string basis={168}
basis-value flexBasis string basis-168
center alignItems
justifyContent		 boolean center
center-value alignItems
justifyContent		 boolean center
col flexDirection boolean col
content alignContent string content={'between'}
content-value alignContent string content-between
flex flex number flex={1}
flex-value flex number flex-1
flex-nowrap flexWrap boolean flex-nowrap
flex-reverse flexWrap boolean flex-reverse
flex-wrap flexWrap boolean flex-wrap
grow flexGrow boolean grow
grow-0 flexGrow boolean grow-o
grow-value flexGrow number grow-1
items alignItems string items={'center'}
items-value alignItems string items-center
justify justifyContent string self={'stretch'}
justify-value justifyContent string self-stretch
row flexDirection boolean row
self alignSelf string self={'stretch'}
self-value alignSelf string self-stretch
shrink flexShrink boolean shrink
shrink-0 flexShrink boolean shrink-o
shrink-value flexShrink number shrink-1

basis-value: basis-100pct will be converted to flexBasis: "100%"

content-value: start | end | center | between | around | evenly

flex-nowrap will be converted to flexWrap: 'nowrap'

items-value: start | end | center | baseline | stretch

justify-value: start | end | center | between | around | evenly

self-value: start | end | center | baseline | stretch

  • fontStyles

prop name style name value type example
bold fontWeight boolean bold
font fontFamily string font={"Roboto"}
italic fontStyle boolean italic
size fontSize number size={12}
*size-value fontSizse number size-12
weight-bold fontWeight boolean weight-bold
weight-light fontWeight boolean weight-light
weight-medium fontWeight boolean weight-medium
weight-regular fontWeight boolean weight-regular

  • fontSizeStyles

prop name style name value type example
size fontSize number size={12}
*size-value fontSizse number size-12

  • fontStyleStyles

prop name style name value type example
italic fontStyle boolean italic

  • fontWeightStyles

prop name style name value type example
bold fontWeight boolean bold
weight-bold fontWeight boolean weight-bold
weight-light fontWeight boolean weight-light
weight-medium fontWeight boolean weight-medium
weight-regular fontWeight boolean weight-regular

  • justifyContent

prop name style name value type example
justify justifyContent string self={'stretch'}
justify-value justifyContent string self-stretch

justify-value: start | end | center | between | around | evenly

  • marginStyles

prop name style name value type example
m margin number m={10}
m-value margin number m-10
mb marginBottom number mb={10}
mb-value marginBottom number mb-10
ml marginLeft number ml={10}
ml-value marginLeft number ml-10
mr marginRight number mr={10}
mr-value marginRight number mr-10
mt marginTop number mt={10}
mt-value marginTop number mt-10
mx marginHorizontal number mx={10}
mx-value marginHorizontal number mx-10
my marginVertical number my={10}
my-value marginVertical number my-10

  • overflowSstyles

prop name style name value type example
ovf overflow string ovf={"scroll"}
ovf-value overflow string ovf-scroll

ovf-value: hidden | scroll | visible

  • paddingStyles

prop name style name value type example
p padding number p={10}
p-value padding number p-10
pb paddingBottom number pb={10}
pb-value paddingBottom number pb-10
pl paddingLeft number pl={10}
pl-value paddingLeft number pl-10
pr paddingRight number pr={10}
pr-value paddingRight number pr-10
pt paddingTop number pt={10}
pt-value paddingTop number pt-10
px paddingHorizontal number px={10}
px-value paddingHorizontal number px-10
py paddingVertical number py={10}
py-value paddingVertical number py-10

  • positionStyles

prop name style name value type example
absolute position boolean absolute
absolute position
bottom
left
righttop		 number absolute={0}
absolute-0 position
bottom
left
righttop		 boolean absolute-0
bottom-value bottom number bottom-10
left-value left number left-10
relative position boolean relative
*right-value right number right-10
*top-value top number top-10
*z-value zIndex number z-1

  • resizeModeStyles

prop name style name value type example
resize-cover resizeMode boolean resize-cover
resize-contain resizeMode boolean resize-contain
resize-stretch resizeMode boolean resize-stretch
resize-repeat resizeMode boolean resize-repeat
resize-center resizeMode boolean resize-center

  • sizingStyles

prop name style name value type example
h height number h={10}
h height string h={"100%"}
*h-value height number h-10
h-value height string h-100pct
maxh maxHeight number maxh={10}
maxh maxHeight string maxh={"100%"}
maxh-value maxHeight number maxh-10
maxh-value maxHeight string maxh-100pct
maxw maxWidth number maxw={10}
maxw maxWidth string maxw={"100%"}
maxw-value maxWidth number maxw-10
maxw-value maxWidth string maxw-100pct
minh minHeight number minh={10}
minh minHeight string minh={"100%"}
minh-value minHeight number minh-10
minh-value minHeight string minh-100pct
minw minWidth number minw={10}
minw minWidth string minw={"100%"}
minw-value minWidth number minw-10
minw-value minWidth string minw-100pct
w width number w={10}
w width string w={"100%"}
*w-value width number w-10
w-value width string w-100pct

  • spacingStyles

prop name style name value type example
m margin number m={10}
m-value margin number m-10
mb marginBottom number mb={10}
mb-value marginBottom number mb-10
ml marginLeft number ml={10}
ml-value marginLeft number ml-10
mr marginRight number mr={10}
mr-value marginRight number mr-10
mt marginTop number mt={10}
mt-value marginTop number mt-10
mx marginHorizontal number mx={10}
mx-value marginHorizontal number mx-10
my marginVertical number my={10}
my-value marginVertical number my-10
p padding number p={10}
p-value padding number p-10
pb paddingBottom number pb={10}
pb-value paddingBottom number pb-10
pl paddingLeft number pl={10}
pl-value paddingLeft number pl-10
pr paddingRight number pr={10}
pr-value paddingRight number pr-10
pt paddingTop number pt={10}
pt-value paddingTop number pt-10
px paddingHorizontal number px={10}
px-value paddingHorizontal number px-10
py paddingVertical number py={10}
py-value paddingVertical number py-10

  • textAlignStyles

prop name style name value type example
align textAlign string align={"center"}
align-value textAlign string align-center

align-value: auto | center | left | right | justify

Readme

Keywords

Package Sidebar

Install

npm i @chengsokdara/styled-props

Repository

github.com/chengsokdara/styled-props

Homepage

github.com/chengsokdara/styled-props#readme

Weekly Downloads

1

Version

0.0.9

License

MIT

Unpacked Size

84.7 kB

Total Files

31

Last publish

Collaborators

  • chengsokdara
Try on RunKit
Report malware