Nine Pomeranian Monsters

    @qc/react-layer

    0.0.1 • Public • Published

    @qc/react-layer

    Build Status Coverage Status License Downloads

    npm badge

    A React component that renders a div with the semantics of representing a layer. Layers are Blocks that are designed to be stacked. Each layer starts a new stacking context.

    Installation

    npm install --save @qc/react-layer

    or

    yarn add @qc/react-layer

    Example Usage

    The following example shows how a page can be composed of multiple layers.

    // HomePage.jsx
    import React from 'react'
    
    import Layer from '@qc/react-layer'
    import Page from '@qc/react-page'
    
    import '@qc/react-block/dist/styles/Block.css'
    import '@qc/react-layer/dist/styles/Layer.css'
    import '@qc/react-page/umd/react-page.css'
    import './HomePage.css'
    
    
    export default class HomePage extends React.Component {
      render() {
        const { dialogs, drawers, messages } = this.props;
        return (
          <Page className="HomePage">
            <Layer className="MainLayer">
              <Page.Head>...</Page.Head>
              <Page.Body>
                <h2>Home Page</h2>
                ...
              </Page.Body>
            </Layer>
            <Layer className="DrawersLayer">
              {drawers}
            </Layer>
            <Layer className="DialogLayer">
              {dialogs}
            </Layer>
            <Layer className="MessageLayer">
              {messages}
            </Layer>
          </Page>
        )
      }
    }
    /* HomePage.css */
    .DrawersLayer {
      z-index: 1;
    }
    .DialogLayer {
      z-index: 2;
    }
    .MessageLayer {
      z-index: 3;
    }

    Just Using Layer CSS

    The key to the Layer component is in the CSS — not the JavaScript. So, we need to include the Layer CSS. Also, because Layer is a Block component, we need to include its CSS too.

    import React from 'react'
    
    import '@qc/react-block/dist/styles/Block.css'
    import '@qc/react-layer/dist/styles/Layer.css'
    
    
    export default function MessageLayer(props) {
      return (
        <div className="Block Layer">
          ...
        </div>
      )
    }

    Usage with @qc/react-page

    An application can be thought of as a set of pages, sometimes known as screens. Within each page may exist several layers. Layers may be explicit or implicit. An example of an explicit layer is when a React component exists for the purpose of representing a layer. That is the purpose of this library. If the layer is not explicit, then it is implicit. The main downfall of implicit layers is that it is not clear where it begins and where it ends.

    There always exists at least one layer, the main layer. This layer represents/contains the main content of the page. There may be times when a need arises where a page has multiple layers. A classic example is when a modal dialog is displayed. Where the dialog is displayed is in a layer, whether implicit or explicit, above the main layer. In the same page, another layer may exist where notification messages are shown. This layer is usually above the dialog layer so that messages will be seen while a dialog is shown.

    import React from 'react'
    import Layer from '@qc/react-layer'
    import Page from '@qc/react-page'
    
    
    class HomePage extends React.Component {
      render() {
        const { showLightbox, showLoginModal } = this.state;
        return (
          <Page className="HomePage">
            <Layer className="MainLayer">
              <Page.Head>
                {/* Insert head components here. */}
              </Page.Head>
              <Page.Body>
                {/* Insert main components here. */}
              </Page.Body>
              <Page.Foot>
                {/* Insert foot components here. */}
              </Page.Foot>
            </Layer>
            {
              (showLightbox || showLoginModal) &&
              <Layer className="DialogLayer">
                {/* Insert modals here. */}
                { showLightbox && <Lightbox/> }
                { showLoginModal && <LoginModal/> }
              </Layer>
            }
            <Layer className="NotificationLayer">
              {/* Insert notification components here. */}
            </Layer>
          </Page>
        )
      }
    }

    Stacking Context & z-index

    An HTML document has one or more stacking context. Within an given stacking context, all z-index values are treated relative to each other. That is, z-index in one stacking context has no effect on the z-index in a different stacking context.

    To reiterate, a document with one stacking context treats all z-index values relative to each other. A document with more than one stacking contexts treat all z-index values within the same stacking context relative to each other.

    This means that an element with a z-index of 10000 in one stacking context won't necessarily be stacked higher than an element with a z-index of 1 in another stacking context.

    Use ES Modules

    This package also comes with the source and an ES variation. Instead of

    import Layer from '@qc/react-layer'

    use

    import Layer from '@qc/react-layer/es/Layer'

    or

    import Layer from '@qc/react-layer/src/Layer'

    to import the component.

    If you do this, then you will need to be sure to transpile the code to a syntax compatible with the browsers you plan to support.

    The source is using object spread syntax. In order to transpile it with babel, you must include the object spread transform plugin.

    Other Packages from QC

    Maintainers

    License

    ISC

    Install

    npm i @qc/react-layer

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    ISC

    Unpacked Size

    12.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • qc