react-laybox

Set of react components to build any layout with ease, mostly based on CSS flexbox.

Usage no npm install needed!

<script type="module">
  import reactLaybox from 'https://cdn.skypack.dev/react-laybox';
</script>

README

react-laybox

Set of react components to build any layout with ease, mostly based on CSS flexbox.

Install

npm install react-laybox

Demo

codepen // TODO

Usage

<Row x="center" y="center" grow>
    <p>item veritcally centered<p/>
    <p>I will be stacked aside each other<p/>
<Row />

Notes

API to align inner components differs from CSS flexbox, it is based on left/right/top/bottom rather than flex-start/flex-end. It allows to get get same reference system wether using a or a layout.

Unlike other UI frameworks which provides Grid layout like Bootstrap, Foundation or Semantic-UI you don't need to put in row. A is a container which stacks its children one below the other, as such there is no reason nor need to put it inside a and this prevents adding dummy component in your code and resulting

s in the DOM tree.

react-laybox overcomes some of the CSS flexbox limitations such as the impossibility to set max-height of an item in row mode (or max-width in column mode). // TODO

react-laybox allows to build full scaled layout ie. content will be resized based on container with. // TODO

Props

props that applies to self (container)

Name Type Description Default Value
grow number or bool flex-grow. 1 is grow={true}, 0 is grow={false}. 0

props that applies to items (children)

Name Type Description Default Value
x enum 'left', 'center', 'right', 'space', 'stretch' horizontal aligment of items inside element 'center'
y enum 'top', 'center', 'bottom', 'space', 'stretch' vertical aligment of items inside element 'center'

custom styling props

Name Type Description Default Value
className string pass custom class to resulting div ''
style object pass custom style to resulting div {}

debug props

Name Type Description Default Value
debug bool add border and color to div false

Dependencies

  • React
  • Prop Types
  • React-container-dimensions