@ludanin/vesta

Lightweight Bootstrap Grid for @emotion/react

Install

npm install --save @ludanin/vesta

Usage

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:

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