stack-layout

npm install @alexeyraspopov/stack-layout

Layout primitive that abstracts flexbox in order to define the layout for children components. See demo: https://alexeyraspopov.github.io/stack-layout/.

Requirements

This package relies on or makes use of

• CSS Variables (Custom Properties)
• ECMAScript 2015

Rationale

Abstraction on top of Flexbox for linear collections. No need to figure out justify-content/align-items values, etc.

Usage with React

import React from 'react';
import Stack from '@alexeyraspopov/stack-layout';

function MyDataList({ items }) {
  return (
    <Stack direction="vertical" spacing={1} alignment="stretch">
      {items.map(item => (
        <MyItem data={item} />
      ))}
    </Stack>
  );
}

Make sure related stylesheet is bundled as well:

@import url('@alexeyraspopov/stack-layout/style.css');