		@@ -15,3 +15,3 @@ 'use strict';Object.defineProperty(exports, "__esModule", { value: true });exports.ACTIONS = undefined;var _extends = Object.assign \|\| function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};var _reduxActions = require('redux-actions');function _toConsumableArray(arr) {if (Array.isArray(arr)) {for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {arr2[i] = arr[i];}return arr2;} else {return Array.from(arr);}}function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}function _objectWithoutProperties(obj, keys) {var target = {};for (var i in obj) {if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];}return target;}
		'LAYER_STACK_VIEW_REGISTER': function LAYER_STACK_VIEW_REGISTER(_ref, _ref2) {var views = _ref.views;var state = _objectWithoutProperties(_ref, ['views']);var _ref2$payload = _ref2.payload;var id = _ref2$payload.id;var renderFn = _ref2$payload.renderFn;
		views = _extends({}, views, _defineProperty({}, id, { renderFn: renderFn, args: {} }));
		views = _extends({}, views, _defineProperty({}, id, { renderFn: renderFn, args: views[id] ? views[id].args : [] }));
		return _extends({}, state, { views: views });
		@@ -18,0 +18,0 @@ },

package.json

		{
		"name": "react-layer-stack",
		"version": "1.1.6",
		"version": "1.1.7",
		"description": "Simple but ubiquitously powerful and agnostic layering system for React. Useful for any kind of windowing/popover/modals/tooltip application",
		@@ -5,0 +5,0 @@ "repository": {

README.md

		### Description

		I've designed `react-layer-stack` to fix one of the most tricky problems React users are facing with: bottom-top UI communication (modals, drag'n'drops, popovers, popups, windows). The lib allows to hold (or share) context (closure) of deep children components with the top layers: you can use variables from closure (which will propagate automatically if you'll provide it to `use` property of `Layer`). Anonymous function which renders `Layer` into `LayerStackMountPoint` receives: layer info (state, index in stack), callbacks (to show and hide layers) and event data from the toggle which controlls this `Layer`.
		I've designed `react-layer-stack` to fix one of the most tricky problems React users are facing with: bottom-to-up UI communication. top-to-bottom flow covers the most UI needs naturally, but sometimes you need to take control over UI element which is linked to parent logically (means you need to use the local context of), but located in the different DOM leaf. Modals, drag'n'drops, popovers, popups, windows - are the various examples of bottom-to-up UI elements (good analogy https://en.wikipedia.org/wiki/Zooming_user_interface).

		This lib allows to hold (or share) context (closure) of deep children components with the top layers: you can use variables from closure (which will propagate automatically if you'll provide it to `use` property of `Layer`). Anonymous function which renders `Layer` into `LayerStackMountPoint` receives: layer info (state, index in stack), callbacks (to show and hide layers) and event data from the toggle which controlls this `Layer`.

		### Installation
		```
		npm install --save react-layer-stack
		```

		### Real-world usage example
		@@ -65,8 +72,19 @@
		```javascript
		import { DEFAULT_STORE_KEY as DEFAULT_LAYERS_STORE_KEY, reducer as layersReducer } from 'react-layer-stack'
		import { createStore, combineReducers } from 'redux';
		import { DEFAULT_STORE_KEY as DEFAULT_LAYERS_STORE_KEY, reducer as layersReducer } from 'react-layer-stack';
		// ...
		const reducer = combineReducers({...reducers, [DEFAULT_LAYERS_STORE_KEY]: layersReducer})
		const reducer = combineReducers({...reducers, [DEFAULT_LAYERS_STORE_KEY]: layersReducer});
		// ...
		export default createStore(reducer);
		```

		### Alternatives
		The is a lot of alternative ways to archive the desirable bottom-to-up link b/w components.

		The most obvious (and naiive as well) way is to use redux (or another flux/data lib) as a transport to hold the "modals" or "popover" state. It's good and robust solution (moreover react-layer-stack use redux as a store [currently](https://github.com/fckt/react-layer-stack/blob/master/README.md#one-important-thing-to-know)), but the problem is that it's not universal, consumes time to implement and grasp, not because of complications, more because you have to reinvent the same pattern again and again (slightly different in each case).

		Another solution is to use on of ready-to-use components. But lot of times are you need slightly different bahavior/look and more productive to implememnt home-grown ad-hock solution.

		And the last option is to find library, like https://github.com/tajo/react-portal, desined ot address needs of bottom-to-up communication. The problem is these libs are often quite opinionated to their cases and doesn't solve the problem in its roots. react-layer-stack aims to give an answer how to organise bottom-to-up communication in the most natural, reasonable and flexible way.

		### Images to understand the whole thing
		@@ -73,0 +91,0 @@ #### View layers stack

src/reducer.js

		@@ -15,3 +15,3 @@ import { handleActions } from 'redux-actions'
		'LAYER_STACK_VIEW_REGISTER': ({views, ...state}, { payload: { id, renderFn } }) => {
		views = {...views, [id]: { renderFn, args: {} } };
		views = {...views, [id]: { renderFn, args: views[id] ? views[id].args : [] } };
		return {...state, views};
		@@ -18,0 +18,0 @@ },

lib/reducer.js.map

Sorry, the diff of this file is not supported yet

react-layer-stack - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics