# @graffft-waggle/container

> graffft-waggle: a container component

Latest version **0.0.4-alpha.14** (published 2022-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @graffft-waggle/container
pnpm add @graffft-waggle/container
yarn add @graffft-waggle/container
bun add @graffft-waggle/container
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4-alpha.14 |
| Published | 2022-06-05 |
| First published | 2020-07-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Dan Kreiger |
| Maintainers | dankreiger |
| Keywords | container component |

## Links

- npm: https://www.npmjs.com/package/@graffft-waggle/container
- Repository: https://github.com/dankreiger/graffft-waggle
- Homepage: https://github.com/dankreiger/graffft-waggle#readme
- Issues: https://github.com/dankreiger/graffft-waggle/issues
- npm.io page: https://npm.io/package/@graffft-waggle/container

## Dependencies (1)

- [@graffft-waggle/media-query](https://npm.io/package/@graffft-waggle/media-query.md) ^0.0.4-alpha.3

## Recent versions

- 0.0.4-alpha.14 (latest) — 2022-06-05
- 0.0.4-alpha.8 — 2022-06-05
- 0.0.4-alpha.7 — 2022-06-05
- 0.0.4-alpha.6 — 2022-06-05
- 0.0.4-alpha.5 — 2022-06-05
- 0.0.4-alpha.4 — 2022-06-04
- 0.0.4-alpha.3 — 2022-06-04
- 0.0.4-alpha.2 — 2022-06-04
- 0.0.4-alpha.1 — 2022-06-04
- 0.0.3-alpha.0 — 2020-07-24

## README

---
filename: /packages/layouts/Container/Container.tsx
---

# Container API

The API documentation of the Container `Graffft Waggle` component.

## Import

```js
import { Container } from '@graffft-waggle/container';
```

## Container

```ts
// see @graffft-waggle/media-query
export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';

export type Breakpoints = {
  [key in Breakpoint]: number;
};
```

```ts
// see @graffft-waggle/container
type ContainerMaxWidths = {
  [key in Breakpoint]: number; // in px
};
```

## Optional Props

| Name                 | Type                 | Default                     | Description                                                                                           |
| :------------------- | :------------------- | :-------------------------- | :---------------------------------------------------------------------------------------------------- |
| `breakpoints`        | `Breakpoints`        | `defaultBreakpoints`        | object of breakpoints, see `@graffft-waggle/media-query` for `defaultBreakpoints` value               |
| `containerMaxWidths` | `ContainerMaxWidths` | `defaultContainerMaxWidths` | object of container max-widths, see `@graffft-waggle/container` for `defaultContainerMaxWidths` value |
| `customScss`         | `string`             | `''`                        | custom scss                                                                                           |

## Demos

- TODO

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