Nervously Proposing Marriage

    react-layers-manager

    0.1.2 • Public • Published

    📚 React Layers Manager

    Manage layers and z-index in React applications effectively.

    No more

    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.

    Within a stacking context, child elements are stacked according to some rules 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:

    <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
    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:

    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,
    }

    Install

    npm i react-layers-manager

    DownloadsWeekly Downloads

    543

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    16.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • giuseppegurgone