2.0.2 • Published 2 years ago
div v2.0.2
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
2.0.2
2 years ago
2.0.1
3 years ago
2.0.0
4 years ago
1.0.1
6 years ago
1.0.0
7 years ago
0.4.1
8 years ago
0.4.0
8 years ago
0.3.2
10 years ago
0.3.1
10 years ago
0.3.0
10 years ago
0.2.1
11 years ago
0.2.0
11 years ago
0.1.9
11 years ago
0.1.8
11 years ago
0.1.7
11 years ago
0.1.6
11 years ago
0.1.5
11 years ago
0.1.4
11 years ago
0.1.3
11 years ago
0.1.2
11 years ago
0.1.1
11 years ago
0.1.0
11 years ago