# @ludanin/vesta

> > Lightweight Bootstrap Grid for @emotion/react

Latest version **1.1.1** (published 2022-01-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ludanin/vesta
pnpm add @ludanin/vesta
yarn add @ludanin/vesta
bun add @ludanin/vesta
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-01-30 |
| First published | 2021-09-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 65.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ludanin |
| Maintainers | ludanin |

## Links

- npm: https://www.npmjs.com/package/@ludanin/vesta
- npm.io page: https://npm.io/package/@ludanin/vesta

## Recent versions

- 1.1.1 (latest) — 2022-01-30
- 1.1.0 — 2021-09-12

## README

# @ludanin/vesta

> Lightweight Bootstrap Grid for @emotion/react

[![NPM](https://img.shields.io/npm/v/@ludanin/vesta.svg)](https://www.npmjs.com/package/@ludanin/vesta)

## Install

```bash
npm install --save @ludanin/vesta
```

## Usage

```jsx
import React from "react"
import { useVesta } from "@ludanin/vesta"

const App: React.FC = () => (
  <>
    <AppHead />
    <Vesta />
    <AppBody>
      <div type="container">
        <div type="row">
          <div col="8" behind="2" smDown="10" smDownBehind="1">
            Column Content
          </div>
        </div>
      </div>
    </AppBody>
  </>
)
```

## TypeScript type definitions

If you're using TypeScript it will be necessary to extend JSX HTML Attributes types according to the following snippet:

```tsx
import { Vesta, VestaHTMLAttributes } from "@ludanin/vesta"

declare module "react" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface HTMLAttributes<T> extends VestaHTMLAttributes<T> {}
}

const App: React.FC = () => (
  <>
    <Vesta />
    <AppBody />
  </>
)
```

## License

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

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