https://github.com/cremalab/react-layout-views
Easy layouts for React & React Native
https://github.com/cremalab/react-layout-views
flexbox layout react react-native typescript
Last synced: about 1 year ago
JSON representation
Easy layouts for React & React Native
- Host: GitHub
- URL: https://github.com/cremalab/react-layout-views
- Owner: cremalab
- Created: 2017-11-01T19:34:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-24T22:37:34.000Z (almost 8 years ago)
- Last Synced: 2025-04-12T05:06:00.790Z (about 1 year ago)
- Topics: flexbox, layout, react, react-native, typescript
- Language: JavaScript
- Homepage: https://codesandbox.io/s/0yy71348nn
- Size: 1.06 MB
- Stars: 4
- Watchers: 9
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Layout Views
Easy layouts for React & React Native
[See live examples](https://codesandbox.io/s/0yy71348nn)
## 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](https://codesandbox.io/s/0yy71348nn)
### Horizontal
```jsx
// This example produces a horizontal layout where
// each section is spaced by 20px and the first section is
// pushing its siblings to the right.
Content 1
Content 2
Content 3
```
### Nested Layouts
```jsx
// This example shows the previous example with
// the addition of a nested layout contained
// by the last section in the parent layout.
Content 1
Content 2
Content 1
Content 2
Content 3
```
### Styling
```jsx
// This example shows how styles may be applied
// directly to `Layout` and `Section`.
// does not produce inline styles
Content 1
Content 2
Content 3 // does not produce inline styles
```
## Setup
### Install
```shell
$ npm install react-layout-views
```
### Import
```jsx
import { Layout, Section } from 'react-layout-views' // web
// OR
import { Layout, Section } from 'react-layout-views/native' // native
...
```
## API
### ``
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
basis?: string | number
- 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.
bottom?: boolean
- align child Sections to bottom of available Layout area
- combine with `center`, `centerHorizontal`, `left`, `right`
center?: boolean
- align child Sections to center X and Y of available Layout area
- combine with `top`, `right`, `bottom`, `left`
centerHorizontal?: boolean
- align child Sections on the X axis
- combine with `top`, `bottom`
centerVertical?: boolean
- align child Sections on the Y axis
- combine with `left`, `right`
grow?: boolean | number
fill available space of parent Section or other flex element
horizontal?: boolean
align child Sections horizontally
left?: boolean
- align child Sections to the left
- combine with `top`, `bottom`, `center`, `centerVertical`
noWrap?: boolean
prevent default wrapping of `horizontal` Layout
reverse?: boolean
reverse order of child Sections
right?: boolean
- align child Sections to the right
- combine with `top`, `bottom`, `center`, `centerVertical`
spacing?: string
- align child Sections to the right
- combine with `top`, `bottom`, `center`, `centerVertical`
top?: boolean
- align child Sections to the top
- combine with `left`, `right`, `center`, `centerHorizontal`
wrapEven?: boolean
- `horizontal` Layout's wrapped orphan Sections maintain their basis-defined widths and remain aligned with preceding row columns
- useful for "card" layouts.
### ``
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.
#### Props
basis?: string | number
ideal width (flex-basis)
bottom?: boolean
- align content to bottom of available Section area
- combine with `center`, `centerHorizontal`, `left`, `right`
center?: boolean
- align content to center X and Y axis of available Section area
- combine with `top`, `right`, `bottom`, `left`
centerHorizontal?: boolean
- align content on the X axis of available Section area
- combine with `top`, `bottom`
centerVertical?: boolean
- align content on the Y axis of available Section area
- combine with `left`, `right`
grow?: boolean | number
- fill available space in parent Layout
- boolean sets value to 1
- may be specified as a number (e.g. 0.5, 2, 50)
left?: boolean
- align content to the left of available Section area
- combine with `top`, `bottom`, `center`, `centerVertical`
right?: boolean
- align content to the right of available Section area
- combine with `top`, `bottom`, `center`, `centerVertical`
top?: boolean
- align content to the top of available Section area
- combine with `left`, `right`, `center`, `centerHorizontal`
## Develop
- `npm run setup` install project and test app deps
- `npm run dist` or `npm run dist:watch` - build
- `npm run apps:run` - start storybook for web and native
- `npm run apps:test` - run visual regression tests with [loki](https://github.com/oblador/loki)