Transform flat grid layouts to CSS Flexbox, Grid, or Yoga layouts
npm install verband> Transform flat grid layouts to CSS Flexbox, Grid, or Yoga layouts
verband (German for "union, connection") bridges different layout systems by converting react-grid-layout format to various CSS layout outputs.
```
┌───────────────────────┐
│ H │
├─────┬─────────────────┤ Flexbox
│ S │ M │ ───► CSS Grid
├─────┴─────────────────┤ Yoga (React Native)
│ F │
└───────────────────────┘
`bash`
pnpm add verband
`typescript
import { LayoutConverter } from 'verband'
const layout = [
{ i: 'header', x: 0, y: 0, w: 12, h: 1 },
{ i: 'sidebar', x: 0, y: 1, w: 3, h: 3 },
{ i: 'main', x: 3, y: 1, w: 9, h: 3 },
{ i: 'footer', x: 0, y: 4, w: 12, h: 1 },
]
const converter = new LayoutConverter(layout, {
cols: 12,
rowHeight: 50,
gap: { row: 10, column: 10 },
})
// Convert to different formats
const flexbox = converter.toFlexbox()
const cssGrid = converter.toCSSGrid()
const yoga = converter.toYoga()
`
`typescript`
const flexbox = converter.toFlexbox()
// {
// container: { display: 'flex', flexDirection: 'column', gap: '10px' },
// rows: [
// {
// style: { display: 'flex', gap: '10px', minHeight: '50px' },
// items: [{ id: 'header', style: { flex: '12 1 0%' } }]
// },
// ...
// ]
// }
`typescript`
const cssGrid = converter.toCSSGrid()
// {
// container: {
// display: 'grid',
// gridTemplateColumns: 'repeat(12, 1fr)',
// gridTemplateRows: '50px 170px 50px',
// gap: '10px 10px'
// },
// items: [
// { id: 'header', style: { gridColumn: '1 / span 12', gridRow: '1' } },
// ...
// ]
// }
`typescript`
const yoga = converter.toYoga()
// {
// root: {
// flexDirection: 'column',
// gap: 10,
// children: [...]
// }
// }
Main class for converting layouts.
`typescript`
new LayoutConverter(layout: FlatLayout, config: LayoutConfig)
#### Methods
| Method | Return Type | Description |
| -------------- | ---------------- | ---------------------------------------- |
| toFlexbox() | FlexboxLayout | Convert to CSS Flexbox |toCSSGrid()
| | CSSGridLayout | Convert to CSS Grid |toYoga()
| | YogaLayout | Convert to Yoga (React Native) |toRowBased()
| | RowBasedLayout | Convert to row-based intermediate format |
Individual transform functions are also exported:
`typescript`
import { flatToRowBased, rowBasedToFlexbox, rowBasedToCSSGrid, rowBasedToYoga } from 'verband'
`typescript
interface FlatLayoutItem {
i: string // id
x: number // column position
y: number // row position
w: number // width in columns
h: number // height in rows
minW?: number
maxW?: number
minH?: number
maxH?: number
}
interface LayoutConfig {
cols: number
rowHeight: number
gap: { row: number; column: number }
padding?: { top: number; right: number; bottom: number; left: number }
}
`
`typescript
import { flatLayoutToAscii, calculateHeight } from 'verband'
// Visualize layout as ASCII art
console.log(flatLayoutToAscii(layout, 12))
// ┌───────────────────────┐
// │ H │
// ├─────┬─────────────────┤
// │ S │ M │
// ├─────┴─────────────────┤
// │ F │
// └───────────────────────┘
// Calculate total height in pixels
const height = calculateHeight(layout, { rowHeight: 50, gap: { row: 10 } })
``
MIT