{"id":10858798,"url":"https://github.com/lexfrl/react-layer-stack","last_synced_at":"2025-10-11T04:55:56.017Z","repository":{"id":53615789,"uuid":"69552537","full_name":"lexfrl/react-layer-stack","owner":"lexfrl","description":"Layering system for React. Useful for popover/modals/tooltip/dnd application","archived":false,"fork":false,"pushed_at":"2021-07-03T14:17:46.000Z","size":4286,"stargazers_count":160,"open_issues_count":7,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-10T04:33:35.441Z","etag":null,"topics":["bottom-up","dropdown","flyout","layer","layers","lightbox","modal","overlay","popover","popup","portal","react","react-component","tooltip","transportation","window","windowing","zindex"],"latest_commit_sha":null,"homepage":"https://fckt.github.io/react-layer-stack","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lexfrl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-29T09:27:44.000Z","updated_at":"2023-12-06T16:47:24.000Z","dependencies_parsed_at":"2022-08-24T21:40:41.252Z","dependency_job_id":null,"html_url":"https://github.com/lexfrl/react-layer-stack","commit_stats":null,"previous_names":["fckt/react-layer-stack","lexfrl/react-layer-stack","lexfro/react-layer-stack"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lexfrl%2Freact-layer-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lexfrl%2Freact-layer-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lexfrl%2Freact-layer-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lexfrl%2Freact-layer-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lexfrl","download_url":"https://codeload.github.com/lexfrl/react-layer-stack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237111679,"owners_count":19257389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bottom-up","dropdown","flyout","layer","layers","lightbox","modal","overlay","popover","popup","portal","react","react-component","tooltip","transportation","window","windowing","zindex"],"created_at":"2024-06-07T17:42:19.369Z","updated_at":"2025-10-11T04:55:50.983Z","avatar_url":"https://github.com/lexfrl.png","language":"JavaScript","readme":"# DEPRICATED\n\n[Live demo](https://fckt.github.io/react-layer-stack/)\n\n[Chat](https://gitter.im/react-layer-stack/Lobby)\n\n### Rationale\n`react`/`react-dom` comes with 2 basic assumptions/ideas:\n- every UI is hierarchical naturally. This why we have the idea of \"`components` wrap each other\"\n- `react-dom` mounts (physically) child component to its parent DOM node by default\n\nThe problem is that sometimes the second property isn't what you want in your specific case. Sometimes you want to mount your component into the different physical DOM node and hold the logical parent-child connection at the same time.\n\nCanonical example is a Tooltip-like component: at some point, during development process, you could find that you need to add some description for your UI element: it'll be rendered in some fixed layer and it should know its coordinates (which are corresponding UI element coord or mouse coords) and at the same time it needs information whether it should be shown right now or not, its content and some context from parent components.\n\n```javascript\nimport React, { Component } from 'react';\nimport { Layer, LayerToggle } from 'react-layer-stack';\nimport FixedLayer from './demo/components/FixedLayer';\n\nclass Demo extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cLayer to=\"screen\" id=\"lightbox2\"\u003e{ (_, content) =\u003e // Layer should have an unique ID\n          \u003cFixedLayer style={ { marginRight: '15px', marginBottom: '15px' } }\u003e\n            { content }\n          \u003c/FixedLayer\u003e\n        }\u003c/Layer\u003e\n\n        \u003cLayerToggle for=\"lightbox2\"\u003e{({ show, hide }) =\u003e ( // Layer is accessible from any part of the tree. \n                                                            // There could be several Toggles for one Layer.\n            \u003cbutton onMouseLeave={ hide } onMouseMove={ ({ pageX, pageY }) =\u003e {\n              show(\n                \u003cdiv style={{\n                      left: pageX, top: pageY + 20, position: \"absolute\",\n                      padding: '10px',\n                      background: 'rgba(0,0,0,0.7)', color: '#fff', borderRadius: '5px',\n                      boxShadow: '0px 0px 50px 0px rgba(0,0,0,0.60)'}}\u003e\n                   “There has to be message triage. If you say three things, you don’t say anything.”\n                \u003c/div\u003e)\n            }}\u003eYet another button. Move your pointer to it.\u003c/button\u003e )}\n          \u003c/LayerToggle\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\nAnother option could be use one of dozens complete implementations with different properties:\nhttps://js.coach/?search=popover\n\n### More examples\nhttps://github.com/fckt/react-layer-stack/blob/master/demo/src/Demo.js\n\n### Live demo\nhttps://fckt.github.io/react-layer-stack/\n\n### Installation\n```\nnpm install --save react-layer-stack\n```\n\n### API\n\n3 components with a few properties.\n\n#### `\u003cLayer /\u003e`\n\n`id: string` - a Layer identificator. There could be only one layer with the same `id`\n\n`to` (optional) - the mount point to mount to. If `to` is not defined the layer will be rendered right in place\n\n`use: Array` (optional) - array with context (closure) variables. Useful if you want to update the Layer if closure variables are changed\n\n`defaultArgs: Array` (optional) - initial arguments for a Layer\n\n`defaultShow: Boolean` (optional)\n\n`children: callback({ isActive, show: callback(args), showOnlyMe, hide, hideAll }, ...args): ReactElement` - will be rendered into \n\n#### `\u003cLayerToggle /\u003e`\n\n`LayerToggle` is a helper to have an access for show/hide callbacks and the current state of the layer. There could be multiple `LayerToggle`s for the same `Layer`.\n\n`for: string` - a Layer identificator which LayerToggle corresponds to\n\n`children: callback({ isActive, show: callback(args), showOnlyMe, hide, hideAll }): ReactElement` - will be mounted (rendered) directly to its parent\n\n#### `\u003cLayerStackMountPoint /\u003e`\n\nThis is a mount point for `Layer`s.\n\n`id: string` (optional) - you can have multiple `LayerStackMountPoint` which could have different ID's\n\n`children: callback({ views, displaying, show: callback(id, args), hide, hideAll, mountPointId, mountPointArgs }): ReactElement` - you can choose different strategies how to render `Layers` in `LayerStackMountPoint` instead of the default one\n\n\n### Real-world usage example\n\nPublic API consist 2 key components: `Layer`, `LayerStackMountPoint` and 1 additional: `LayerToggle` (sometimes toggle needs to know which popover is open now).\nSet the `LayerStackMountPoint` somewhere on the top of the tree:\n\n```javascript\nimport { LayerStackProvider, LayerStackMountPoint } from 'react-layer-stack'\n// ...\n//  render() {\n        return (\n            \u003cLayerStackProvider\u003e\n              \u003cContainer\u003e\n                \u003cLayerStackMountPoint id=\"screen\"/\u003e\n                \u003cAppBar /\u003e\n                \u003cContainer className={styles.container}\u003e\n                  {children}\n                \u003c/Container\u003e\n              \u003c/Container\u003e\n            \u003c/LayerStackProvider\u003e\n        )\n//  }\n```\n\nDefine your `Layer`. This example shows how to propagate variables from lexical context (https://developer.mozilla.org/en/docs/Web/JavaScript/Closures) to the `Layer`, which will be displayed in the `LayerStackMountPoint`. Each layer should have an `id` and `use` properties. `use` property is needed to determine if we should update the lexical context of the anonymous function which renders `Modal` into `Layer` if `Cell` is updated.\n\n```javascript\nimport { Layer, LayerToggle } from 'react-layer-stack'\n// ... for each `object` in array of `objects`\nconst modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id\nreturn (\n    \u003cCell {...props}\u003e\n        // the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerToggle\n        \u003cLayer to=\"screen\" use={[objects[rowIndex], rowIndex]} id={modalId}\u003e {({\n            hide, // alias for `hide(modalId)`\n            index } // useful to know to set zIndex, for example\n            , e) =\u003e // access to the arguments (click event data in this example)\n          \u003cModal onClick={ hide } zIndex={(index + 1) * 1000}\u003e\n            \u003cConfirmationDialog\n              title={ 'Delete' }\n              message={ \"You're about to delete to \" + '\"' + objects[rowIndex].name + '\"' }\n              confirmButton={ \u003cButton type=\"primary\"\u003eDELETE\u003c/Button\u003e }\n              onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hide) } // hide after confirmation\n              close={ hide } /\u003e\n          \u003c/Modal\u003e }\n        \u003c/Layer\u003e\n        \n        // this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree\n        \u003cLayerToggle for={ modalId }\u003e {({show}) =\u003e // show is alias for `show(modalId)`\n          \u003cdiv style={styles.iconOverlay} onClick={ (e) =\u003e show(e) }\u003e // additional arguments can be passed (like event)\n            \u003cIcon type=\"trash\" /\u003e\n          \u003c/div\u003e }\n        \u003c/LayerToggle\u003e\n    \u003c/Cell\u003e)\n// ...\n```\n\n### ReactDOM.unstable_createPortal\nFacebook team is working on the similar [feature](https://github.com/facebook/react/blob/d28ac9eea0cad6be949cc9d3f973cf548e89bf97/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js#L254) called \"portals\" (by analogy with https://github.com/tajo/react-portal). That approach uses `ReactDOM` (API) which is fatal if browser is not the only target. There are [other considerations](https://github.com/facebook/react/pull/8386#issuecomment-265628702) also. \n\n### Alternatives\nThe is a lot of alternative ways to archive the desirable **bottom-to-up** link b/w components.\n\nThe most obvious (and naiive as well) way is to use redux (or another flux/data lib) as a transport to send data from one DOM branch to another. It's good and robust solution, but the problem is that it just feels like overkill. It seems not universal also, could consume some additional time to implement and grasp afterwards, not because of complications, but because you have to reinvent the same pattern again and again (slightly different in each case, see https://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions).\n\nAnother solution is to use on of ready-to-use components. But sometimes are you need slightly different behavior/look and more productive to implement home-grown ad-hock solution.\n\nAnd the last option is to find library like https://github.com/tajo/react-portal or https://react-bootstrap.github.io/react-overlays/, designed to address the needs of **bottom-to-up** communication. These libs are often quite opinionated to their cases and doesn't solve the problem in its roots. The goal of **react-layer-stack** is to give an answer how to organize **bottom-to-up** communication in the most natural, reasonable and flexible way.\n\n### The future\nObviously there is a lot of applications for the Layer API (https://github.com/fckt/react-layer-stack/blob/master/README.md#layer-). So, you can declare the entire React app as a Layer and manage it from the outer app!\n\n### Images to understand the whole thing\n#### View layers stack\n![Symlink](http://cfs6.tistory.com/upload_control/download.blog?fhandle=YmxvZzE1NzczMkBmczYudGlzdG9yeS5jb206L2F0dGFjaC8wLzEzMDAwMDAwMDAyMi5qcGc%3D)\n\n#### Layer id and \"use\" property (sym/soft link)\n![Symlink](http://1.bp.blogspot.com/-gZMz1nF3GC0/UiyehOS_bWI/AAAAAAAABQI/BpYyEtadcEg/s640/profiles1.png)\n\n### Related Stackoverflow q\u0026a\n- http://stackoverflow.com/a/40461655/524034\n- http://stackoverflow.com/questions/40443160/bootstrap-modal-like-behavior-in-react\n- http://stackoverflow.com/questions/40444788/rendering-a-modal-in-react\n- http://stackoverflow.com/questions/39805544/showing-list-of-buttons-displaying-modals-in-reactjs\n- http://stackoverflow.com/questions/39913593/dynamically-displaying-data-from-a-clickable-table-row-into-a-modal\n\nThe easiest way to support `react-layer-stack` is to upvote the answers below.\n","funding_links":[],"categories":["UI Utilities"],"sub_categories":["Portal"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flexfrl%2Freact-layer-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flexfrl%2Freact-layer-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flexfrl%2Freact-layer-stack/lists"}