@bsara/react-layouts

@bsara/react-layouts

Storybook

Changelog

Install

Project Install

$ npm install --save @bsara/react-layouts

API

LinearLayout

A layout that arranges children either horizontally in a single column or vertically in a single row.

At it's core, this component is basically a CSS flexbox. As such, all CSS flexbox properties are valid when styling a LinearLayout. This also means that this component is NOT supported in browsers that do not support CSS flexbox without appropriate polyfills.

Some sensible CSS defaults have been set and some CSS custom properties have been provided as a convenience (see the documented CSS custom properties below for more details).

Props

Any prop that is acceptable by a div component is acceptable by a LinearLayout component.

• direction ?String - Default = "horizontal"

  The direction to arrange the component's children.

  Possible values:

  • "horizontal"
  • "horiz"
  • "h"
  • "vertical"
  • "vert
  • "v"

• domRef ?Function

  TODO: Description

Immediate Children CSS Custom Properties

• --linear-layout-item-gap Same types as any "margin" CSS property

  TODO: Description

• --linear-layout-item-size Same types as "width" or "height" CSS properties

  TODO: Description

• --linear-layout-item-min-size Same types as "min-width" or "min-height" CSS properties

  TODO: Description

• --linear-layout-item-max-size Same types as "max-width" or "max-height" CSS properties

  TODO: Description

Examples

Storybook Examples

MyLinearLayoutComponent.jsx

import React from 'react';
import LinearLayout from '@bsara/react-layouts/LinearLayout';
import './MyLinearLayoutComponent.css';


export default function MyLinearLayoutComponent(props) {
  return (
    <LinearLayout {...props} className="layout" direction="horizontal">
      <a>Anchor 0</a>
      <a>Anchor 1</a>
      <a>Anchor 2</a>
      <LinearLayout className="sub-layout" direction="vertical">
        <a>Sub Anchor 0</a>
        <a>Sub Anchor 1</a>
        <a>Sub Anchor 2</a>
      </LinearLayout>
    </LinearLayout>
  );
}

MyLinearLayoutComponent.css

.layout {
  --linear-layout-item-gap: 5px;
}

.sub-layout > * {
  --linear-layout-item-gap: 10px;
}

Output (Text Representation)

The component above will lay out it's children similar to the following:

    |----------|----------|----------|----------------|
    | Anchor 0 | Anchor 1 | Anchor 2 ||--------------||
    |          |          |          || Sub Anchor 0 ||
    |          |          |          ||--------------||
    |          |          |          || Sub Anchor 1 ||
    |          |          |          ||--------------||
    |          |          |          || Sub Anchor 2 ||
    |          |          |          ||--------------||
    |----------|----------|----------|----------------|

GridLayout

A layout that places its children in a rectangular grid.

This layout is basically a CSS grid. As such, all CSS grid properties are valid when styling a GridLayout. This also means that this component is NOT supported in browsers that do not support CSS grid without appropriate polyfills.

Some sensible CSS defaults have been set and some CSS custom properties have been provided as a convenience (see the documented CSS custom properties below for more details).

Props

Any prop that is acceptable by a div component is acceptable by a GridLayout component.

• domRef ?Function

  TODO: Description

CSS Custom Properties

• --grid-row-count ?Number

  TODO: Description

• --grid-column-count ?Number

  TODO: Description

Immediate Children CSS Custom Properties

• --grid-row-span ?Number

  TODO: Description

• --grid-column-span ?Number

  TODO: Description

• --grid-item-size Same types as "width" or "height" CSS properties

  TODO: Description

• --grid-item-min-size Same types as "min-width" or "min-height" CSS properties

  TODO: Description

• --grid-item-max-size Same types as "max-width" or "max-height" CSS properties

  TODO: Description

• --grid-item-width Same types as "width" CSS property

  TODO: Description

• --grid-item-min-width Same types as "min-width" CSS property

  TODO: Description

• --grid-item-max-width Same types as "max-width" CSS property

  TODO: Description

• --grid-item-height Same types as "height" CSS property

  TODO: Description

• --grid-item-min-height Same types as "min-height" CSS property

  TODO: Description

• --grid-item-max-height Same types as "max-height" CSS property

  TODO: Description

Examples

Storybook Examples

MyGridLayoutComponent.jsx

import React from 'react';
import GridLayout from '@bsara/react-layouts/GridLayout';
import './MyGridLayoutComponent.css';


export default function MyGridLayoutComponent(props) {
  return (
    <GridLayout {...props} className="layout">

      <span className="cell0-0">Item 0.0</span>
      <span className="cell0-1">Item 0.1</span>

      <span>Item 1.1</span>
      <span>Item 1.2</span>

    </GridLayout>
  );
}

MyGridLayoutComponent.css

.layout {
  --grid-column-count: 3;
}

.cell0-0 {
  --grid-row-span: 2;
}

.cell0-1 {
  --grid-column-span: 2;
}

Output (Text Representation)

The component above will lay out it's children similar to the following:
               
    |----------|---------------------|
    | Item 0.0 | Item 0.1            |
    |          |----------|----------|
    |          | Item 1.1 | Item 1.2 |
    |----------|----------|----------|

License

ISC License (ISC)

Copyright (c) 2018, Brandon D. Sara (http://bsara.pro/)

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.