# boxible

> Typescript React component to set flexbox properties on a element

Latest version **2.0.0** (published 2023-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install boxible
pnpm add boxible
yarn add boxible
bun add boxible
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-08-22 |
| First published | 2021-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 1 |
| Unpacked size | 303.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Nathan Stitt |
| Maintainers | nathanstitt |

## Links

- npm: https://www.npmjs.com/package/boxible
- Repository: https://github.com/nathanstitt/boxible
- npm.io page: https://npm.io/package/boxible

## Dependencies (1)

- [jest-environment-jsdom](https://npm.io/package/jest-environment-jsdom.md) ^29.4.3

## Recent versions

- 2.0.0 (latest) — 2023-08-22
- 1.7.1-0 (next) — 2023-02-27
- 1.7.7 — 2023-05-24
- 1.7.6 — 2023-05-22
- 1.7.5 — 2023-05-18
- 1.7.4 — 2023-05-09
- 1.7.3 — 2023-04-25
- 1.7.2 — 2023-04-25
- 1.7.1 — 2023-02-27
- 1.7.0 — 2022-10-05
- 1.6.2 — 2022-10-05
- 1.6.1 — 2022-10-05
- 1.6.0 — 2022-10-05
- 1.5.1 — 2022-10-05
- 1.5.0 — 2022-08-17
- … 13 more at https://npm.io/package/boxible/versions

## README

![Build Status](https://github.com/nathanstitt/boxible/actions/workflows/checks.yml/badge.svg)

## make flexbox containers in typescript using emotion

Uses emotionjs to style a div using flexbox styles. React components can easily set any flexbox style using component properties. Typescript gives you nice code completion and type-safe validations.

Full docs are published at [https://nathanstitt.github.io/boxible/](https://nathanstitt.github.io/boxible/)

```jsx
import { Box } from "boxible";

const Layout = () => (
  <Box direction={{ mobile: "columReverse", tablet: "column" }}>
    <Box justify="between">
      <Box align="start">Left</Box>
      <Box align="end" direction="column">
        <span>Right Top</span>
        <span>Right Center</span>
      </Box>
    </Box>
    <Box justify="center">Bottom Center</Box>
  </Box>
);
```

On a desktop sized (>992px), the display will be:

```
 Left                   Right Top
                     Right Center
        Bottom Center
```

And on a mobile sized device (<=576px) the display would be:

```jsx
        Bottom Center
                     Right Center

Left Right Top
```

Screen sizes are defined as `SCREEN_SIZES` in [styles.ts](src/styles.ts#L18)

Their definitions can be overridden as detailed in the hacking sizes [test.ts](src/box.test.tsx#L46)

### Boxible Props

| property     | allowed values                               | default |
| ------------ | -------------------------------------------- | ------- |
| align        | baseline, center, end, start, stretch        |         |
| alignContent | around, between, center, end, start, stretch |         |
| direction    | column, row                                  | row     |
| justify      | around, between, center, end, evenly, start  |         |
| flex         | true, false, grow, shrink                    |         |
| basis        | string value, auto, full, 1/2, 1/4, 1/3, 2/3 |         |
| gap          | px value, small, medium, large, xxlarge      | false   |
| height       | string,( min, max )                          |         |
| width        | string, ( min, max )                         |         |
| fill         | boolean, 'horizontal', 'vertical'            |         |
| wrap         | boolean                                      | false   |
| className    | string                                       |         |
| padding      | px value, small, medium, large, xxlarge      | Size    |
| margin       | px value, small, medium, large, xxlarge      | Size    |
| centered     | true                                         | false   |

align, alignContent, direction, gap, and justify are "responsive" and can alternatively be prefixed with a size

Since the Box element is a emotionjs component, you can also use the "as" prop to render elements other than div, such
as `label` to wrap inputs.

```jsx
<Box as="label">
  <input name="foo" />
  <b>Click to focus input</b>
</Box>
```

#### extractBoxibleProps<T>(props)

A utility function to aid in composing nested components. A small example:

```tsx
import { Box, BoxProps, extractBoxibleProps }
import { Calc, CalcProps } from 'fake' // another component that accepts
const Combined<CalcProps & BoxProps> = (props) => {
  const [boxProps, calculateProps] = extractBoxibleProps<CalcProps>(props)
  return (
    <Box {...boxProps}><Calc {...calcProps} /></Box>
  )
}

```

#### Credits

Boxible is based loosely on Grommt’s [Box component](https://v2.grommet.io/box), but re-written in Typescript
and with a few differences, such as no animation support.

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