Initial commit

Author: giuseppeg

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "react"
+  ],
+  "plugins": [
+    "transform-class-properties"
+  ]
+}

.gitignore

@@ -0,0 +1,2 @@
+lib
+node_modules

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-present Giuseppe Gurgone
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,102 @@
+# 📚 React Layers Manager
+
+Manage layers and `z-index` in React applications effectively.
+
+No more
+
+```css
+z-index: 10000;
+z-index: 10001;
+z-index: 999;
+z-index: 99999;
+```
+
+That's right 👦
+
+## 👩‍🏫 The issue with z-index: 9999
+
+Some [CSS properties create stacking contextes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
+
+Within a stacking context, child elements are stacked according to [some rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index) and in general one on top of each other based on their z-index value.
+
+The problem though is that elements cannot escape their parent stackig context.
+
+What this means in practice is that an element with `z-index: 9999` inside of a stacking context with `z-index: 1` will always be below a stacking context sibling of the latter with `z-index: 2` for example:
+
+```html
+<div style="position: absolute; z-index: 2; top: 0;">
+  I am on top and I don't care about your 9999
+</div>
+
+<div style="position: absolute; z-index: 1; top: 0;">
+  <div style="position: absolute; z-index: 9999;">
+    I want to be in front of you
+  </div>
+</div>
+```
+
+`react-layers-manager` solves this issue.
+
+## 💪 How it works
+
+`react-layers-manager` leverages the power of the new React Context API introduced in React 16.3 and Portals to render your layers as siblings of your application root.
+
+This way layers are guaranteed to always be on top of your application!
+
+## Installation
+
+```
+npm i react-layers-manager
+```
+
+## Usage
+
+`react-layers-manager` exposes two components:
+
+* `LayersManager` that is just a wrapper for your app
+* `Layer` to be used contextually in your components when you want to render something in a layer
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { LayersManager, Layer } from 'react-layers-manager'
+
+const SampleModal = () => (
+  <Layer>
+    <Modal>We have updated our privacy policy :trollface:</Modal>
+  </Layer>
+)
+
+const App = () => (
+  <h1>Hello folks</h1>
+  <SampleModal />
+  <SampleModal />
+)
+
+ReactDOM.render(
+  <LayersManager>
+    <App />
+  </LayersManager>,
+  document.getElementById('root')
+)
+```
+
+### Layer
+
+The `Layer` component accepts a few optional `props`:
+
+```js
+type Props = {
+  // Renders a layer at a specific index.
+  // By default layers are appended to the layers manager container.
+  index?: number,
+
+  // Invoked when the layer mounts with the app element.
+  // This is useful to set aria-hidden="true" for example when showing a modal
+  // or disable scrolling.
+  onMount?: (root: HTMLElement) => void,
+
+  // Invoked when the layer unmounts with the app element.
+  onUnmount?: (root: HTMLElement) => void,
+}
+```

index.js

@@ -0,0 +1,5 @@
+exports = module.exports = require('./lib')
+exports.default = exports
+Object.defineProperty(exports, "__esModule", {
+  value: true
+})

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-layers-manager",
+  "version": "0.1.0",
+  "main": "./index.js",
+  "files": [
+    "index.js",
+    "lib",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "description": "Manage layers and z-index in React applications effectively",
+  "keywords": [
+    "react",
+    "z-index",
+    "zIndex",
+    "layers",
+    "modal",
+    "tooltip"
+  ],
+  "author": "Giuseppe Gurgone",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "rollup": "^0.60.1",
+    "rollup-plugin-babel": "^3.0.4"
+  },
+  "peerDependencies": {
+    "react": ">= 16.3.x"
+  },
+  "scripts": {
+    "prepublish": "rollup -c"
+  }
+}

rollup.config.js

@@ -0,0 +1,15 @@
+import babel from 'rollup-plugin-babel'
+
+export default {
+  input: './src/index.js',
+  output: {
+    file: './lib/index.js',
+    format: 'cjs'
+  },
+  plugins: [
+    babel({
+      exclude: 'node_modules/**'
+    })
+  ],
+  external: ['react', 'react-dom']
+};

src/Layer.js

@@ -0,0 +1,37 @@
+import React from "react"
+import { createPortal } from "react-dom"
+import { Consumer } from "./context"
+
+const Layer = props => (
+  <Consumer>
+    {({ host, root }) =>
+      host && root && <LayerImpl {...props} host={host} root={root} />
+    }
+  </Consumer>
+)
+export default Layer
+
+class LayerImpl extends React.Component {
+  state = { container: null }
+  componentDidMount() {
+    const { host, index, onMount, root } = this.props
+    const container = host.ownerDocument.createElement("div")
+    const sibling = typeof index === "number" && host.children[index]
+    sibling
+      ? host.insertBefore(container, sibling)
+      : host.appendChild(container)
+    this.setState({ container }, () => {
+      root && onMount && onMount(root)
+    })
+  }
+  componentWillUnmount() {
+    const { container } = this.state
+    const { root, host, onUnmount } = this.props
+    root && onUnmount && onUnmount(root)
+    host && host.removeChild(container)
+  }
+  render() {
+    const { container } = this.state
+    return container && createPortal(this.props.children, container)
+  }
+}

src/LayersManager.js

@@ -0,0 +1,20 @@
+import React from "react"
+import { Provider } from "./context"
+
+export default class LayersManager extends React.Component {
+  root = React.createRef()
+  host = React.createRef()
+  componentDidMount() {
+    this.forceUpdate()
+  }
+  render() {
+    return (
+      <Provider value={{ root: this.root.current, host: this.host.current }}>
+        <div ref={this.root} style={{ isolation: "isolate" }}>
+          {this.props.children}
+        </div>
+        <div ref={this.host} style={{ isolation: "isolate" }} />
+      </Provider>
+    )
+  }
+}

src/context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react"
+export const { Provider, Consumer } = createContext()

src/index.js

@@ -0,0 +1,2 @@
+export { default as LayersManager } from "./LayersManager"
+export { default as Layer } from "./Layer"