o-react-toolbox v0.2.1

React toolSpaceFiller

Components and utilities for React library

Note

I use this library to write programs that I use. For that reason I will continue to improve it as long as I continue to program with it.

o-react-toolbox does semantic versioning and a change of a major version number will introduce breaking changes.

Should you choose to use this library be aware that I will not support other versions than the most recent one nor I'll provide migration scripts or even migration notes between versions.

If you are using o-react-blue install o-react-blue and skip this library. o-react-blue install this library for convenience

Installation

npm install o-react-toolbox

If you are using react-blue skip this installation

Usage

Flex

Flex column example

<VerticalStack>
  <SpaceFiller>
    Some contents
  </SpaceFiller>
  <SpaceFiller>
    More contents
  </SpaceFiller>
</VerticalStack>

Flex row example

<HorizontalStack>
  <SpaceFiller>
    Some contents
  </SpaceFiller>
  <SpaceFiller>
    More contents
  </SpaceFiller>
</HorizontalStack>

Center a using flex

<HorizontalStack>
  <SpaceFiller expand/>
  <SpaceFiller>
    Some contents
  </SpaceFiller>
  <SpaceFiller expand/>
</HorizontalStack>

Evenly distributed SpaceFilleres

<HorizontalStack>
  <SpaceFiller expand/>
  <SpaceFiller>
    Some contents
  </SpaceFiller>
  <SpaceFiller expand/>
  <SpaceFiller>
    More contents
  </SpaceFiller>
  <SpaceFiller expand/>
</HorizontalStack>

SpaceFiller with a fixed size separation expressed in vw

<HorizontalStack>
  <SpaceFiller expand/>
  <SpaceFiller>
    Some contents
  </SpaceFiller>
  <SpaceFiller fixedSize='3'/>
  <SpaceFiller>
    More contents
  </SpaceFiller>
  <SpaceFiller expand/>
</HorizontalStack>

SpaceFiller alignment

<HorizontalStack>
  <SpaceFiller top>
    Some contents
  </SpaceFiller>
  <SpaceFiller center>
    More contents
  </SpaceFiller>
  <SpaceFiller bottom>
    Even more contents
  </SpaceFiller>
</HorizontalStack>

Grid

Create a Grid of 10x3

<Grid w="10" h="3">
  <Cell x="1" y="1" w="2" h="2">
    Some contents
  </Cell>
  <Cell x="6" y="1" w="1" h="3">
    More contents
  </Cell>
</Grid />

Create a Column and split its space among several Cells

<VerticalSplitter>
  <Split size={1}>
    Some contents
  </Split>
  <SpaceFiller size={2}>
  <Split size={3}>
    More contents
  </Split>
</VerticalSplitter>

Create a Row and split its space among several Cells

<HorizontalSplitter>
  <Split size={1}>
    Some contents
  </Split>
  <SpaceFiller size={2}>
  <Split size={3}>
    More contents
  </Split>
</VerticalSplitter>