npm install layout-elements
This package relies on and makes use of CSS Variables (Custom Properties) in runtime.
Stack: abstraction on top of Flexbox for linear collections. No need to figure
out justify-content/align-items values, etc.
Scene: a useful layer to force aspect ratio of an element.
import React from 'react';
import { Stack } from 'layout-elements';
function MyDataList({ items }) {
return (
<Stack direction="vertical" spacing={1} alignment="stretch">
{items.map(item => (
<MyItem data={item} />
))}
</Stack>
);
}import React from 'react';
import { Scene } from 'layout-elements';
function MyDataVis() {
return (
<Scene aspectRatio={16 / 9} preserve>
<svg>...</svg>
</Scene>
);
}Make sure related stylesheet is bundled as well:
@import url('layout-elements/style.css');The library includes Flow and TypeScripts type definitions. Mostly aiming at correct props usage.