{"id":24079870,"url":"https://github.com/hypersoftllc/qc-react-layer","last_synced_at":"2026-04-14T07:33:15.296Z","repository":{"id":135273524,"uuid":"127927773","full_name":"hypersoftllc/qc-react-layer","owner":"hypersoftllc","description":"A React component that renders a div with the semantics of representing a layer.","archived":false,"fork":false,"pushed_at":"2018-04-04T02:44:38.000Z","size":92,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-11-01T19:12:51.620Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hypersoftllc.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-03T15:16:54.000Z","updated_at":"2018-04-04T02:43:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"ee0e984f-0f60-4a32-91c4-e152960ef449","html_url":"https://github.com/hypersoftllc/qc-react-layer","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/hypersoftllc/qc-react-layer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypersoftllc%2Fqc-react-layer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypersoftllc%2Fqc-react-layer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypersoftllc%2Fqc-react-layer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypersoftllc%2Fqc-react-layer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hypersoftllc","download_url":"https://codeload.github.com/hypersoftllc/qc-react-layer/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypersoftllc%2Fqc-react-layer/sbom","scorecard":{"id":475536,"data":{"date":"2025-08-11","repo":{"name":"github.com/hypersoftllc/qc-react-layer","commit":"b3eb9f92967d57aaaf4810d72c0bfd77d5fc1142"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":0,"reason":"Found 0/8 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: ISC License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'develop'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"75 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-6394-6h9h-cfjg","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T15:11:18.057Z","repository_id":135273524,"created_at":"2025-08-19T15:11:18.057Z","updated_at":"2025-08-19T15:11:18.057Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31786914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-01-09T22:25:52.740Z","updated_at":"2026-04-14T07:33:15.290Z","avatar_url":"https://github.com/hypersoftllc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @qc/react-layer\n\n[![Build Status][travis-svg]][travis-url]\n[![Coverage Status][coverage-image]][coverage-url]\n[![License][license-image]][license-url]\n[![Downloads][downloads-image]][downloads-url]\n\n[![npm badge][npm-badge-png]][package-url]\n\nA React component that renders a `div` with the semantics of representing a\nlayer.  Layers are [Blocks][qc-react-block] that are designed to be stacked.\nEach layer starts a new [stacking context][mdn-stacking-context].\n\n\n## Installation\n\n```sh\nnpm install --save @qc/react-layer\n```\n\nor\n\n```sh\nyarn add @qc/react-layer\n```\n\n\n## Example Usage\n\nThe following example shows how a page can be composed of multiple layers.\n\n```jsx\n// HomePage.jsx\nimport React from 'react'\n\nimport Layer from '@qc/react-layer'\nimport Page from '@qc/react-page'\n\nimport '@qc/react-block/dist/styles/Block.css'\nimport '@qc/react-layer/dist/styles/Layer.css'\nimport '@qc/react-page/umd/react-page.css'\nimport './HomePage.css'\n\n\nexport default class HomePage extends React.Component {\n  render() {\n    const { dialogs, drawers, messages } = this.props;\n    return (\n      \u003cPage className=\"HomePage\"\u003e\n        \u003cLayer className=\"MainLayer\"\u003e\n          \u003cPage.Head\u003e...\u003c/Page.Head\u003e\n          \u003cPage.Body\u003e\n            \u003ch2\u003eHome Page\u003c/h2\u003e\n            ...\n          \u003c/Page.Body\u003e\n        \u003c/Layer\u003e\n        \u003cLayer className=\"DrawersLayer\"\u003e\n          {drawers}\n        \u003c/Layer\u003e\n        \u003cLayer className=\"DialogLayer\"\u003e\n          {dialogs}\n        \u003c/Layer\u003e\n        \u003cLayer className=\"MessageLayer\"\u003e\n          {messages}\n        \u003c/Layer\u003e\n      \u003c/Page\u003e\n    )\n  }\n}\n```\n\n```css\n/* HomePage.css */\n.DrawersLayer {\n  z-index: 1;\n}\n.DialogLayer {\n  z-index: 2;\n}\n.MessageLayer {\n  z-index: 3;\n}\n```\n\n**Just Using `Layer` CSS**\n\nThe key to the `Layer` component is in the CSS — not the JavaScript.  So, we\nneed to include the `Layer` CSS.  Also, because `Layer` is a `Block` component,\nwe need to include its CSS too.\n\n```jsx\nimport React from 'react'\n\nimport '@qc/react-block/dist/styles/Block.css'\nimport '@qc/react-layer/dist/styles/Layer.css'\n\n\nexport default function MessageLayer(props) {\n  return (\n    \u003cdiv className=\"Block Layer\"\u003e\n      ...\n    \u003c/div\u003e\n  )\n}\n```\n\n\n## Usage with `@qc/react-page`\n\nAn application can be thought of as a set of pages, sometimes known as screens.\nWithin each page may exist several layers.  Layers may be explicit or implicit.\nAn example of an explicit layer is when a React component exists for the purpose\nof representing a layer.  That is the purpose of this library.  If the layer is\nnot explicit, then it is implicit.  The main downfall of implicit layers is that\nit is not clear where it begins and where it ends.\n\nThere always exists at least one layer, the main layer.  This layer\nrepresents/contains the main content of the page.  There may be times when a\nneed arises where a page has multiple layers.  A classic example is when a modal\ndialog is displayed.  Where the dialog is displayed is in a layer, whether\nimplicit or explicit, above the main layer.  In the same page, another layer\nmay exist where notification messages are shown.  This layer is usually above\nthe dialog layer so that messages will be seen while a dialog is shown.\n\n```jsx\nimport React from 'react'\nimport Layer from '@qc/react-layer'\nimport Page from '@qc/react-page'\n\n\nclass HomePage extends React.Component {\n  render() {\n    const { showLightbox, showLoginModal } = this.state;\n    return (\n      \u003cPage className=\"HomePage\"\u003e\n        \u003cLayer className=\"MainLayer\"\u003e\n          \u003cPage.Head\u003e\n            {/* Insert head components here. */}\n          \u003c/Page.Head\u003e\n          \u003cPage.Body\u003e\n            {/* Insert main components here. */}\n          \u003c/Page.Body\u003e\n          \u003cPage.Foot\u003e\n            {/* Insert foot components here. */}\n          \u003c/Page.Foot\u003e\n        \u003c/Layer\u003e\n        {\n          (showLightbox || showLoginModal) \u0026\u0026\n          \u003cLayer className=\"DialogLayer\"\u003e\n            {/* Insert modals here. */}\n            { showLightbox \u0026\u0026 \u003cLightbox/\u003e }\n            { showLoginModal \u0026\u0026 \u003cLoginModal/\u003e }\n          \u003c/Layer\u003e\n        }\n        \u003cLayer className=\"NotificationLayer\"\u003e\n          {/* Insert notification components here. */}\n        \u003c/Layer\u003e\n      \u003c/Page\u003e\n    )\n  }\n}\n```\n\n\n## Stacking Context \u0026 `z-index`\n\nAn HTML document has one or more [stacking context][mdn-stacking-context].\nWithin an given stacking context, all `z-index` values are treated relative to\neach other.  That is, `z-index` in one stacking context has no effect on the\n`z-index` in a different stacking context.\n\nTo reiterate, a document with one stacking context treats all `z-index` values\nrelative to each other.  A document with more than one stacking contexts treat\nall `z-index` values within the _same_ stacking context relative to each other.\n\nThis means that an element with a `z-index` of `10000` in one stacking context\nwon't necessarily be stacked higher than an element with a `z-index` of `1` in\nanother stacking context.\n\n\n## Use ES Modules\n\nThis package also comes with the source and an ES variation.  Instead of\n\n```jsx\nimport Layer from '@qc/react-layer'\n```\n\nuse\n\n```jsx\nimport Layer from '@qc/react-layer/es/Layer'\n```\n\nor\n\n```jsx\nimport Layer from '@qc/react-layer/src/Layer'\n```\n\nto import the component.\n\nIf you do this, then you will need to be sure to transpile the code to a syntax\ncompatible with the browsers you plan to support.\n\nThe source is using object spread syntax.  In order to transpile it with\n[babel], you must include the [object spread transform\nplugin][babel-obj-sprd-txm].\n\n\n## Other Packages from [QC]\n\n* [@qc/react-block][qc-react-block]\n* [@qc/react-conditionals][qc-react-conditionals]\n* [@qc/react-page][qc-react-page]\n\n\n## Maintainers\n\n- [Danny Hurlburt](https://github.com/dhurlburtusa)\n\n\n## License\n\nISC\n\n\n[babel]: https://babeljs.io/\n[babel-obj-sprd-txm]: https://babeljs.io/docs/plugins/transform-object-rest-spread/\n[coverage-image]: https://coveralls.io/repos/github/hypersoftllc/qc-react-layer/badge.svg?branch=master\n[coverage-url]: https://coveralls.io/github/hypersoftllc/qc-react-layer?branch=master\n[downloads-image]: http://img.shields.io/npm/dm/@qc/react-layer.svg\n[downloads-url]: http://npm-stat.com/charts.html?package=@qc/react-layer\n[license-image]: http://img.shields.io/npm/l/@qc/react-layer.svg\n[license-url]: LICENSE\n[package-url]: https://npmjs.org/package/@qc/react-layer\n[mdn-stacking-context]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n[npm-badge-png]: https://nodei.co/npm/@qc/react-layer.png?downloads=true\u0026stars=true\n[qc]: https://www.npmjs.com/~qc\n[qc-react-block]: https://www.npmjs.com/package/@qc/react-block\n[qc-react-conditionals]: https://www.npmjs.com/package/@qc/react-conditionals\n[qc-react-page]: https://www.npmjs.com/package/@qc/react-page\n[travis-svg]: https://travis-ci.org/hypersoftllc/qc-react-layer.svg?branch=master\n[travis-url]: https://travis-ci.org/hypersoftllc/qc-react-layer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypersoftllc%2Fqc-react-layer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhypersoftllc%2Fqc-react-layer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypersoftllc%2Fqc-react-layer/lists"}