react-layout-views - npm Package Compare versions

Comparing version 0.4.0-beta.3 to 0.4.0

package.json

 {
   "name": "react-layout-views",
-  "version": "0.4.0-beta.3",
+  "version": "0.4.0",
   "main": "./web/index.js",
@@ -5,0 +5,0 @@ "types": "./web/index.d.ts",

README.md

@@ -9,6 +9,8 @@ # React Layout Views
 
-Creating UI layouts should be simple and declarative. 
+Creating UI layouts should be simple and declarative.
 
-The aim of this library is to provide a simple and intuitive API for composing layouts by abstracting away certain flex concepts like flex-direction and main/cross axis alignment and replacing these with more intuitive terms like `horizontal`, `bottom`, `right`, and `center`.
+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
@@ -87,44 +89,200 @@
 
-The `Layout` component wraps multiple `Section` components.
+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
 
-- `grow?: boolean | number` how should the Layout fill its container
-- `spacing?: number (native) / string (web e.g. 20px, 2%, etc.)` spacing between child `<Section />`s
-- `horizontal?: boolean` are child sections arranged horizontally or vertically
-- `style?: object` JavaScript style object (on the web this is passed to styled-components and will not produce inline-styles). All platform-specific styling is supported.
+<details>
+<summary>
+  <code>basis?: string | number</code>
+</summary>
 
-##### Alignment
+  - ideal width (flex-basis) of child Sections
 
-Alignment props arrange child `Sections` accordingly and can be combined (e.g. `<Layout bottom right>...</Layout>`).
+  > 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.
+</details>
+<details>
+<summary>
+  <code>bottom?: boolean</code>
+</summary>
 
-- `center?: boolean`
-- `centerVertical?: boolean`
-- `centerHorizontal?: boolean`
-- `top?: boolean`
-- `right?: boolean`
-- `bottom?: boolean`
-- `left?: boolean`
+  - align child Sections to bottom of available Layout area 
+  - combine with `center`, `centerHorizontal`, `left`, `right`
+</details>
+<details>
+<summary>
+  <code>center?: boolean</code>
+</summary>
 
+  - align child Sections to center X and Y of available Layout area
+  - combine with `top`, `right`, `bottom`, `left`
+</details>
+<details>
+<summary>
+  <code>centerHorizontal?: boolean</code>
+</summary>
+
+  - align child Sections on the X axis
+  - combine with `top`, `bottom`
+</details>
+<details>
+<summary>
+  <code>centerVertical?: boolean</code>
+</summary>
+
+  - align child Sections on the Y axis
+  - combine with `left`, `right`
+</details>
+<details>
+<summary>
+  <code>grow?: boolean | number</code>
+</summary>
+
+  fill available space of parent Section or other flex element
+</details>
+<details>
+<summary>
+  <code>horizontal?: boolean</code>
+</summary>
+
+  align child Sections horizontally
+</details>
+<details>
+<summary>
+  <code>left?: boolean</code>
+</summary>
+
+  - align child Sections to the left
+  - combine with `top`, `bottom`, `center`, `centerVertical`
+</details>
+<details>
+<summary>
+  <code>noWrap?: boolean</code>
+</summary>
+
+  prevent default wrapping of `horizontal` Layout
+</details>
+<details>
+<summary>
+  <code>reverse?: boolean</code>
+</summary>
+
+  reverse order of child Sections
+</details>
+<details>
+<summary>
+  <code>right?: boolean</code>
+</summary>
+
+  - align child Sections to the right
+  - combine with `top`, `bottom`, `center`, `centerVertical`
+</details>
+<details>
+<summary>
+  <code>spacing?: string</code>
+</summary>
+
+  - align child Sections to the right
+  - combine with `top`, `bottom`, `center`, `centerVertical`
+</details>
+<details>
+<summary>
+  <code>top?: boolean</code>
+</summary>
+
+  - align child Sections to the top
+  - combine with `left`, `right`, `center`, `centerHorizontal`
+</details>
+
+<details>
+<summary>
+  <code>wrapEven?: boolean</code>
+</summary>
+
+  - `horizontal` Layout's wrapped orphan Sections maintain their basis-defined widths and remain aligned with preceding row columns
+  - useful for "card" layouts. 
+</details>
+
 ### `<Section />`
 
-The `Section` component subdivides a `Layout` and contains other components or another `Layout`.
+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
 
-- `grow?: boolean | number` how should the `Section` fill its container
-- `style?: object` JavaScript style object (on the web this is passed to styled-components and will not produce inline-styles). All platform-specific styling is supported.
+<details>
+<summary>
+  <code>basis?: string | number</code>
+</summary>
 
-##### Alignment
+  ideal width (flex-basis)
+</details>
+<details>
+<summary>
+  <code>bottom?: boolean</code>
+</summary>
 
-Alignment props arrange child content accordingly and can be combined (e.g. `<Section center right>...</Section>`).
+  - align content to bottom of available Section area 
+  - combine with `center`, `centerHorizontal`, `left`, `right`
+</details>
+<details>
+<summary>
+  <code>center?: boolean</code>
+</summary>
 
-- `center?: boolean`
-- `centerVertical?: boolean`
-- `centerHorizontal?: boolean`
-- `top?: boolean`
-- `right?: boolean`
-- `bottom?: boolean`
-- `left?: boolean`
+  - align content to center X and Y axis of available Section area
+  - combine with `top`, `right`, `bottom`, `left`
+</details>
+<details>
+<summary>
+  <code>centerHorizontal?: boolean</code>
+</summary>
 
+  - align content on the X axis of available Section area
+  - combine with `top`, `bottom`
+</details>
+<details>
+<summary>
+  <code>centerVertical?: boolean</code>
+</summary>
+
+  - align content on the Y axis of available Section area
+  - combine with `left`, `right`
+</details>
+<details>
+<summary>
+  <code>grow?: boolean | number</code>
+</summary>
+
+  - fill available space in parent Layout
+  - boolean sets value to 1
+  - may be specified as a number (e.g. 0.5, 2, 50)
+</details>
+<details>
+<summary>
+  <code>left?: boolean</code>
+</summary>
+
+  - align content to the left of available Section area
+  - combine with `top`, `bottom`, `center`, `centerVertical`
+</details>
+<details>
+<summary>
+  <code>right?: boolean</code>
+</summary>
+
+  - align content to the right of available Section area
+  - combine with `top`, `bottom`, `center`, `centerVertical`
+</details>
+<details>
+<summary>
+  <code>top?: boolean</code>
+</summary>
+
+  - align content to the top of available Section area
+  - combine with `left`, `right`, `center`, `centerHorizontal`
+</details>
+
 ## Develop
@@ -131,0 +289,0 @@

typings/web.d.ts

 import * as React from 'react'
 
 export interface LayoutProps extends React.HTMLProps<React.ReactNode> {
-  basis?: string
+  basis?: string | number
   bottom?: boolean
@@ -24,3 +24,3 @@ center?: boolean
 export interface SectionProps extends React.HTMLProps<React.ReactNode> {
-  basis?: string
+  basis?: string | number
   bottom?: boolean
@@ -27,0 +27,0 @@ center?: boolean

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29176

increased by13.16%

Number of lines in readme file

292

increased by117.91%

No dependency changes