React-layout-views NPM

React Layout Views

Easy layouts for React & React Native

Why

Creating UI layouts should be simple and declarative.

The aim of this library is to provide an intuitive API for composing layouts by abstracting away certain flex concepts like axis alignment and replacing these with more intuitive terms like horizontal, bottom, right, and center.

Another goal of this library is to provide consistent spacing between layout elements.

Examples

See live examples

Horizontal

// This example produces a horizontal layout where 
// each section is spaced by 20px and the first section is 
// pushing its siblings to the right.

<Layout horizontal spacing='20px'>
  <Section grow>Content 1</Section>
  <Section>Content 2</Section>
  <Section>Content 3</Section>
</Layout>

Nested Layouts

// This example shows the previous example with
// the addition of a nested layout contained
// by the last section in the parent layout.

<Layout horizontal spacing='20px'>
  <Section grow>Content 1</Section>
  <Section>Content 2</Section>
  <Section>
    <Layout spacing='10px'>
      <Section>Content 1</Section>
      <Section>Content 2</Section>
      <Section>Content 3</Section>
    </Layout>
  </Section>
</Layout>

Styling

// This example shows how styles may be applied
// directly to `Layout` and `Section`.

<Layout horizontal spacing='20px' style={{background: 'red'}}> // does not produce inline styles
  <Section grow>Content 1</Section>
  <Section>Content 2</Section>
  <Section style={{padding: '1em'}}>Content 3</Section> // does not produce inline styles
</Layout>

Setup

Install

$ npm install react-layout-views

Import

import { Layout, Section } from 'react-layout-views' // web

// OR

import { Layout, Section } from 'react-layout-views/native' // native

...

API

`<Layout />`

A Layout wraps one or many Section components. By default child Sections are arranged vertically. Adding the horizontal prop arranges children across the X axis.

Spacing between child Sections is set via the spacing prop as a CSS length for web or number for React Native.

The grow prop is used to define how a Section fills available space inside a Layout. Alignment props (e.g. top, right, etc.) may be combined to position content.

Props

ideal width (flex-basis) of child Sections
By default, Layout will wrap Sections according to this value. On web, this can be any CSS length. Native accepts a number or percentage string.
align child Sections to bottom of available Layout area
combine with center, centerHorizontal, left, right
align child Sections to center X and Y of available Layout area
combine with top, right, bottom, left
align child Sections on the X axis
combine with top, bottom
align child Sections on the Y axis
combine with left, right
fill available space of parent Section or other flex element
align child Sections horizontally
align child Sections to the left
combine with top, bottom, center, centerVertical
prevent default wrapping of horizontal Layout
reverse order of child Sections
align child Sections to the right
combine with top, bottom, center, centerVertical
align child Sections to the right
combine with top, bottom, center, centerVertical
align child Sections to the top
combine with left, right, center, centerHorizontal

horizontal Layout's wrapped orphan Sections maintain their basis-defined widths and remain aligned with preceding row columns
useful for "card" layouts.

`<Section />`

The Section component subdivides a Layout and contains other components or another Layout. The grow prop is used to define how a Section fills available space inside a Layout. Alignment props (e.g. top, right, etc.) may be combined to position content.