https://github.com/Wulf/div

<Div row> Use flexbox with ease in React! </Div>
https://github.com/Wulf/div

Last synced: about 2 months ago
JSON representation

<Div row> Use flexbox with ease in React! </Div>

• Host: GitHub
• URL: https://github.com/Wulf/div
• Owner: Wulf
• Created: 2020-08-25T04:54:44.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-01-27T15:04:29.000Z (over 2 years ago)
• Last Synced: 2024-04-24T04:21:12.618Z (5 months ago)
• Language: TypeScript
• Homepage:
• Size: 276 KB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# div

> <Div row> Use flexbox with ease in React! </Div>

[![NPM](https://img.shields.io/npm/v/div.svg)](https://www.npmjs.com/package/div) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Features

* Easy to read & use flexbox!

* Accepts all standard div props! (like `style`, `className` and `id`)

* Typescript support!

## Install

```bash

# with yarn:

yarn add div

# with npm:

npm install --save div

```

## Usage

```tsx

import React, { Component } from 'react'

import { Div } from 'div'

const Example = () => {

  return (

    


      


        A third of the space

      

      


        Two thirds of space!

      

    

  )

}

```


## 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` and `flex-direction: row`.

### `column`: {boolean}

* Makes div a flex column.

* Applies `display: flex` and `flex-direction: column`.

### `reverse`: {boolean}

* Reverses the flex-direction if `column` or `row` are specified.

### `wrap`: {boolean}

* Applies `flex-wrap: 'wrap'`.

* By default, a div's `flex-wrap` is `'nowrap'`.

### `center`: {boolean}

* Centers content if `row` or `column` are specified.

* Applies `justify-content: 'center'` and `align-items: 'center'`.

## License

MIT © [Wulf](https://github.com/Wulf)