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
npm install o-react-toolbox
If you are using react-blue
skip this installation
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>
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>