layout-elements

npm install layout-elements

Requirements

This package relies on and makes use of CSS Variables (Custom Properties) in runtime.

Rationale

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.

Usage

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');

Typings

The library includes Flow and TypeScripts type definitions. Mostly aiming at correct props usage.