react-simplebox

A simple way to build application layouts

Installation

With npm do:

npm install react-simplebox --save

With yarn do:

yarn add react-simplebox

Usage

import React, { Component } from 'react'
import { Grid, Row, Col } from 'react-simplebox'
import 'react-simplebox/build/styles.css'

class App extends Component {
  render() {
    return (
      <div style={{ height: '100vh', width: '100vw', display: 'flex' }}>
        <Grid debug height="fill">
          <Row>First</Row>
          <Row>
            <Col>Second</Col>
            <Col>Third</Col>
          </Row>
        </Grid>
      </div>
    )
  }
}

Examples

Goes here...

Dependencies

react-simplebox depends on react and react-dom - it's recommend to use with react v16.2+ because of fragments that helps eliminate wrapping elements noise at a minimum.

API

Grid

• gridSize (number) default: 8 - px value of the desired grid
• forceGridSize (bool) default: false - All children values will be units of gridSize instead of px values.
• dir (string) default: ltr - content direction one of: "ltr" or "rtl"
• gap (number) default: null - gap between children elements
• debug (bool) default: false - enable debug helpers
• debugType (string) default: background - toggle childrens debug layout with one of: "background" or "outline"
• gridHelper (string) default: null - toggle background grid with one of: "baseline", "baseline2", "modular", "modular2"
• height (string) default: fit - toggle between block or inline mode with one of: "fill" or "fit"
• width (string) default: fill - toggle between block or inline mode with one of: "fill" or "fit"
• relative (bool) default: false - mark the element as relative to the children.

Row & Col

• size (number|string) default: 0 - define the size of element use a number or string fit.
• gap (number) default: null - define the gap between children.
• justify (string) default: null - define how to justify children with one of "start", "center", "end" or "space-between".
• align (string) default: null - define how to align children according to the Y-axis. Allowed values are: top, bottom and center for Row and center for Col.
• relative (bool) default: false - mark the element as relative to the children.
• paddingStart (number) default: null
• paddingEnd (number) default: null
• paddingTop (number) default: null
• paddingBottom (number) default: null
• scroll (string) default: vertical - define scrolling behaviour with one of: "vertical", "horizontal" or "both"
• onScroll (func) default: null - callback used when scrolling position changes.
• boxStyle (object) default: null - a whitelist of styles that can change the box ui, but not the layout. See the full list here.
• config (object) default: {} - WARNING: INTERNAL, automatic provided by the parent.