div
v2.0.2
Published
<Div row> Use flexbox with ease in React! </Div>
Downloads
174
Readme
div
<Div row> Use flexbox with ease in React! </Div>
Features
- Easy to read & use flexbox!
- Accepts all standard div props! (like
style
,className
andid
) - Typescript support!
Install
# with yarn:
yarn add div
# with npm:
npm install --save div
Usage
import React, { Component } from 'react'
import { Div } from 'div'
const Example = () => {
return (
<Div row>
<Div column flex={1}>
A third of the space
</Div>
<Div column flex={2}>
Two thirds of space!
</Div>
</Div>
)
}
Props
(All props are optional)
flex
: {number | string}
- Applies
flex: {number}
. - Reminder: the flex shorthand params are in this order:
flex-grow
,flex-shrink
,flex-basis
(without commas)
row
: {boolean}
- Makes div a flex row.
- Applies
display: flex
andflex-direction: row
.
column
: {boolean}
- Makes div a flex column.
- Applies
display: flex
andflex-direction: column
.
reverse
: {boolean}
- Reverses the flex-direction if
column
orrow
are specified.
wrap
: {boolean}
- Applies
flex-wrap: 'wrap'
. - By default, a div's
flex-wrap
is'nowrap'
.
center
: {boolean}
- Centers content if
row
orcolumn
are specified. - Applies
justify-content: 'center'
andalign-items: 'center'
.
License
MIT © Wulf