# @zirayhao/box

> Simpliefied flex layouts.

Latest version **1.0.7** (published 2021-10-25) · 0 weekly downloads

## Install

```sh
npm install @zirayhao/box
pnpm add @zirayhao/box
yarn add @zirayhao/box
bun add @zirayhao/box
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2021-10-25 |
| First published | 2020-06-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | zirayhao |
| Keywords | layout, flex |

## Links

- npm: https://www.npmjs.com/package/@zirayhao/box
- Repository: https://github.com/ziruihao/box
- Issues: https://github.com/ziruihao/box/issues
- npm.io page: https://npm.io/package/@zirayhao/box

## Dependencies (1)

- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.10.3

## Recent versions

- 1.0.7 (latest) — 2021-10-25
- 1.0.6 — 2020-09-13
- 1.0.5 — 2020-09-13
- 1.0.4 — 2020-08-21
- 1.0.3 — 2020-08-21
- 1.0.2 — 2020-06-26
- 1.0.1 — 2020-06-20
- 1.0.0 — 2020-06-20

## README

# Box

Box is an intutive layout component for React projects. As a easily tunable flexbox, it removes the hassle of styling flexing properties and offers an immediate sense of the UI layout right in the JSX.

## Installation

```bash
npm install @zirayhao/box
```
## Quick Start

Import it into your React component.

```javascript
import React from 'react'
import Box from '@zirayhao/box'

const Component = (props) => {
  return(
    <Box row justify="center" align="center" wrap flex={1}>
      <Box col>
        <h1>Hello</h1>
        <Box height={50} className="vertical-spacer">
        <p>Some text</p>
      </Box>
      <Box width={100} className="horizontal-spacer">
      <img src={image} />
    </Box>
  );
}
```
## Docs

| Prop        | Type                        | Description                                                                                                                                                             | Default |
|-------------|-----------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|
| `row`       | `boolean`                   | Flexes the box horizontally if `true`.                                                                                                                                  | `true`  |
| `col`       | `boolean`                   | Flexes the box vertically if `true`.                                                                                                                                    | `false` |
| `justify`   | `string`                    | Controls content justification. One of `start` (flex-start), `end` (flex-end), `center`, `between` (space-between), `around` (space-around).                            | `start` |
| `align`     | `string`                    | Aligns items. One of `start`  (flex-start),  `end`  (flex-end),  `center` ,  `stretch`  (stretch).                                                                      | `stretch` |
| `self`      | `string`                    | Controls its self alignment if embedded in a parent flex box. One of  `start`  (flex-start),  `end`  (flex-end),  `center` ,  `stretch`  (stretch).                     | None    |
| `wrap`      | `boolean`                   | Declares wrapping behavior, `true` for flex-wrap.                                                                                                                       | `false` |
| `flex`      | `number`                    | Controls the flex growth.                                                                                                                                               | None    |
| `width`     | `number \| string`          | Directly modifies the CSS width property. Example inputs are `50`, `50px`, `70%`.                                                                                       | None    |
| `height`    | `number \| string`          | Directly modifies the CSS height property. Example inputs are  `50` ,  `50px` ,  `70%` .                                                                                | None    |
| `pad`       | `number \| string \| array` | If of type `number` or `string`, directly modifies the CSS padding property. If of type `array`, each element corresponds to the top, bottom, left, and right paddings. | None    |
| `id`        | `string`                    | Injects a DOM `id`.                                                                                                                                                     | None    |
| `className` | `string`                     | Injects DOM `class`es.                                                                                                                                                  | None    |

## Author

Ziray Hao

---
_Source: https://npm.io/package/@zirayhao/box · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._