0.5.6 • Published 7 years ago

react-flex-bool v0.5.6

Weekly downloads
1
License
ISC
Repository
github
Last release
7 years ago

react-flex-bool

Simple React component for creating flex nodes with only boolean props

npm version

Installation

npm install react-flex-bool

Code is not minified! Use preferable minifier during project compilation

Code Example

<Flex
  rowReverse
  hBetween
  vStretch>
  <div>My content</div>
  <div>Another content</div>
  <Item
    grow={2}
    order={2}
    onClick={() => alert('Hi!')}>
    Content inside Item component
  </Item>
</Flex>

Note that Flex and Item can receive common props

Flex props

CSS PropertyCSS ValueBoolean prop
flex-directionrowrow
flex-directionrow-reverserowReverse
flex-directioncolumncolumn
flex-directioncolumn-reversecolumnReverse
justify-contentflex-starthStart
justify-contentflex-endhEnd
justify-contentcenterhCenter
justify-contentspace-betweenhBetween
justify-contentspace-aroundhAround
align-contentstretchvStretch
align-contentcentervCenter
align-contentflex-startvStart
align-contentflex-endvEnd
align-contentspace-betweenvBetween
align-contentspace-aroundvAround
align-itemsstretchitemStretch
align-itemscenteritemCenter
align-itemsflex-startitemStart
align-itemsflex-enditemEnd
align-itemsbaselinebaseline
flex-wrapnowrapnoWrap
flex-wrapwrapwrap
flex-wrapwrap-reversewrapReverse

Item props

CSS PropertyPropPropType
flex-growgrownumber
flex-shrinkshrinknumber
flex-basisbasisstring or number
align-selfalignenum
orderordernumber

TODO

  • Throw error if multiple props from one property are present
0.5.6

7 years ago

0.5.5

7 years ago

0.5.4

8 years ago

0.5.3

8 years ago

0.5.2

8 years ago

0.5.1

8 years ago

0.5.0

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago