react-area - npm Package Compare versions

package.json

		{
		"version": "0.1.1-alpha.2",
		"version": "0.1.1-alpha.3",
		"license": "MIT",
		@@ -44,2 +44,6 @@ "main": "dist/index.js",
		},
		"repository": {
		"type": "git",
		"url": "https://github.com/everdimension/react-area.git"
		},
		"keywords": [
		@@ -53,4 +57,5 @@ "ui area",
		"slot fill",
		"react-area",
		"react"
		]
		}

README.md

		@@ -1,1 +0,75 @@
		# React Area [PoC] [WIP]
		# React Area

		_NOTE_: For now, this is an experimental Proof of Concept.

		## Install

		```
		npm install react-area
		```

		## Getting Started

		First, wrap your app in the `<AreaProvider />` component:

		```js
		import { AreaProvider } from 'react-area';
		import ReactDOM from 'react-dom';
		import React from 'react';

		ReactDOM.render(
		<AreaProvider>
		<YourApp />
		</AreaProvider>,
		document.getElementById('root'),
		);
		```

		Next, anywhere in your app you can define an "render area" with a `<RenderArea />` component:

		```js
		import { RenderArea } from 'react-area';
		import React from 'react';

		function Layout() {
		return (
		<div>
		<aside>
		<RenderArea name="navigation" />
		</aside>
		<main>
		<RenderArea name="main" />
		</main>
		</div>
		);
		}
		```

		And then, from any other component you can render inside those areas
		by using the `<Content />` component:

		```js
		import { Content } from 'react-area';
		import React from 'react';

		function SomeFeature() {
		return (
		<>
		<Content name="navigation">
		<a href="/some-feature">SomeFeature</a>
		</Content>

		<Content name="main">
		<div>Feature Content</div>
		</Content>
		</>
		);
		}
		```

		## Prior Art

		This project is heavily inspired by these projects:

		- Slot Fill by Cam West: https://github.com/camwest/react-slot-fill
		- SlotFill by wordpress: https://github.com/WordPress/gutenberg/tree/master/packages/components/src/slot-fill

New alerts