react-page-layout - npm Package Compare versions

Comparing version 0.9.1 to 0.9.3

package.json

		{
		"name": "react-page-layout",
		"version": "0.9.1",
		"version": "0.9.3",
		"description": "Layout system for react",
		@@ -5,0 +5,0 @@ "author": "Jose R Villalon Soler",

README.md

		@@ -30,12 +30,12 @@ ## About
		This library allows for you to concentrate layout logic
		into its own components. It allows you to create a Layout component that can have serveral Slots where you can inject content.
		into its own components. It allows you to create a Layout component that can have serveral <Slots> where you can inject content.

		A layout aware component can use the <Page> component and
		the <Section> to fill this slots.
		the <Section> to the layouts slots.

		## Setup

		1. First Step is that you have to create a layout component, this is a regular react component that has several slots where content can be injected. You define one or more slots by using the <Slot> component and giving them a name. In this case main
		1. First Step is that you have to create a layout component, this is a regular react component that has several slots where content can be injected. You define one or more slots by using the <Slot> component and giving them a name. In this case "main"

		```
		```js
		import React, { Component } from 'react';
		@@ -60,5 +60,5 @@ import { Slot } from 'react-page-layout';

		2. You have to make your app, layout aware. In order to do this you use the <LayoutProvider> component and let it know about the different layouts for your app.
		2. You have to make your app layout aware. In order to do this you use the <LayoutProvider> component and let it know about the different layouts for your app.

		```
		```js
		import React, { Component } from 'react';
		@@ -93,7 +93,7 @@ import { render } from 'react-dom';

		Note: Your page components don't have to be direct decendents of the <LayoutProvider>, in fact you probably will never use it this way. This is your for illustration purpouses but this feature is what allows you to use this with any routing library.
		Note: Your page components don't have to be direct decendents of the <LayoutProvider>, in fact you probably will never use it this way. This is for illustration purposes only. This feature is what allows you to use this package with any routing library.

		3. Next you have to create pages, that provides the content for the different slots in your layout. To do this we use two components, <Page> and <Section>.
		3. Next you have to create pages. The pages provide the content for the different slots in your layout. To do this we use two components, <Page> and <Section>.

		```
		```js
		import { Page, Section } from 'react-page-layout';
		@@ -115,15 +115,15 @@
		You have to pass the layout property to the <Page> , to specify what layout you want to use.
		Similarly each <Section> has a name property
		that ties it to the slot to which it provides content. In this case
		since we only have one layout and we named it public, and we only have one
		slot and we named it main we use those values.
		Similarly each <Section> has a slot property
		that ties it to the slot for which it provides content. In this case
		since we only have one layout named public, and it only has one
		slot named it main we use those values.


		## Advanced Usage
		## Usage

		1. By default, the root of a slot is a div, but it can be customized via its component prop. You can also customize className and styles.
		1. By default, the root of a slot is a div, but it can be customized via its the <Slot> props. Can also customize the component, className and styles. See the documentation for details.

		2. You can use several slots in one single layout
		2. You can use several slots in a layout.

		```
		```js
		...
		@@ -138,3 +138,3 @@ <Slot name="header" component="header" />

		```
		```js
		...
		@@ -147,9 +147,9 @@ <Slot name="header" component="header">

		4. If a slot doesn't have content it doesn't render at all. Meaning that the dom doesn't contain any elements for that slot.
		4. If a slot doesn't have content it doesn't render at all. Meaning that the dom doesn't contain any elements for that slot. This is usefull because you don't have to have extra elements lying arround.

		5. Any props passed to the Page component as passed to the layout. This can be usefull for titles, breadcrumbs or to flag any customization that the page requires.
		5. Any props passed to the <Page> component are passed to the layout, as is. This can be usefull for titles, breadcrumbs or to flag any customization that the page requires.

		6. Slots can be nested

		```
		```js
		...
		@@ -170,10 +170,12 @@ <Slot name="main" component="main">

		the corresponding page can decide, if he wants the margin
		or not by which slot it targets.
		In this case the <Slot> with name content has a margin. And the main slot has extra content.
		The corresponding page can decide, what it wants to show
		by using the corresponding slot.

		```
		```js
		...
		<Page layout="mylayout">
		<Section slot="content">
		I have things on top and after me
		I have things on top and after me, and
		I have a margin
		</Section>
		@@ -184,7 +186,7 @@ </Slot>

		```
		```js
		...
		<Page layout="mylayout">
		<Section slot="main">
		I take the full content
		Im alone and margin-less
		</Section>
		@@ -191,0 +193,0 @@ </Slot>

react-page-layout - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics