{"id":24079905,"url":"https://github.com/hypersoftllc/qc-react-page","last_synced_at":"2026-06-12T12:31:06.336Z","repository":{"id":135273522,"uuid":"127595795","full_name":"hypersoftllc/qc-react-page","owner":"hypersoftllc","description":"A small library of page related semantic React components.","archived":false,"fork":false,"pushed_at":"2018-04-04T02:49:50.000Z","size":293,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-07-07T07:50:07.143Z","etag":null,"topics":["react-component","semantic"],"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-01T04:08:54.000Z","updated_at":"2018-04-04T02:48:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"2191a1ba-dc44-4f5d-8e8e-8bba8ce7c0ff","html_url":"https://github.com/hypersoftllc/qc-react-page","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"6469c7324ffb1573d5c7d44492ab2e480530516b"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/hypersoftllc/qc-react-page","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypersoftllc%2Fqc-react-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypersoftllc%2Fqc-react-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypersoftllc%2Fqc-react-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypersoftllc%2Fqc-react-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hypersoftllc","download_url":"https://codeload.github.com/hypersoftllc/qc-react-page/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypersoftllc%2Fqc-react-page/sbom","scorecard":{"id":475537,"data":{"date":"2025-08-11","repo":{"name":"github.com/hypersoftllc/qc-react-page","commit":"6469c7324ffb1573d5c7d44492ab2e480530516b"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"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":"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":"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":"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":"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":"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":"Code-Review","score":0,"reason":"Found 0/13 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":"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":"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":"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":"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":"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":"86 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","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-257v-vj4p-3w2h","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-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","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-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","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-6c8f-qphg-qjgp","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-pp57-mqmh-44h7","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","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-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","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-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","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-3h5v-q93c-6h6q","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.468Z","repository_id":135273522,"created_at":"2025-08-19T15:11:18.468Z","updated_at":"2025-08-19T15:11:18.468Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34245217,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["react-component","semantic"],"created_at":"2025-01-09T22:26:33.510Z","updated_at":"2026-06-12T12:31:06.284Z","avatar_url":"https://github.com/hypersoftllc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @qc/react-page\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 small library of page related semantic React components.  These allow a web\npage to be composed semantically -- making it easier to understand it's\nstructure and [outline][whatwg-outline].\n\nWebsites and web apps many times are composed of multiple pages where only one\npage is shown at a time.  The pages themselves are composed of many different\n**regions**.  A typical page has a site header in the top region (aka a page\nhead) which usually has a brand image along with some site-wide navigation.\nBelow this region may be another page head which contains breadcrumbs, a table\nof contents, share-this links, and other page-specific content.  Below this\nregion is usually the meat of the page.  This region (aka a page body) may be\ncomposed of many sections that help form the outline of the page.  A page may\nhave many page bodies.  Some pages may have a sidebar region which is usually\ndisplayed on either the left-side or right-side of the page.  After the page\nbody(ies) and page sidebar is the bottom region (aka a page foot) which among\nother things usually contains legal information such as copyright notices, a\nlist of site links, a link to the site's privacy policy, and a link to the\nsite's terms.\n\nIn the description above, please note the word `site` may be replaced by the\nword `app`.\n\n\n## Installation\n\n```sh\nnpm install --save @qc/react-page\n```\n\nor\n\n```sh\nyarn add @qc/react-page\n```\n\n\n## Semantics\n\nEach of the page components have specific meaning and purpose.\n\nIf you are unfamiliar with semantics, checkout the [semantics][whatwg-semantics]\nsection at the [WhatWG].\n\nAlso, being familiar with how headings and sections generate an outline is\nuseful when choosing an appropriate value for the `compType` property of the\npage related components.  See [headings and sections][whatwg-headings-sections]\nat [WhatWG].  Pay very close attention to when the word `heading` and the word\n`header` is used.  They can be very easy to confuse.\n\n\n**`Page`**\n\nRepresents a page on a website or a web app.  Usually only one page is displayed\nat a time.  However, sometimes multiple pages may be loaded to provide a better\nuser experience (UX).  For instance, in mobile apps, it is not uncommon to\nnavigate back and forth between a search results page and a details page.  In\nthis scenerio, it would be ideal not to reload the results page everytime the\nuser navigates back to it.  This can be easily done by using multiple page\ncomponents.\n\nBy default, pages produce a `div` element.  This may be changed using the\n`compType` property which may be set to `'div'` or `'section'`.\n\n**`Page.Head`**\n\nRepresents the top region of a page.  It is okay to have more than one page\nhead.  Usually they follow one after the other.  Typically, the first page head\nwill contain site-wide content such as brand information and the main\nnavigation.  If the page has page-specific content such as breadcrumbs, a table\nof contents, share-this links, etc, then a separate page head will follow the\nsite-wide page head.\n\nBy default, page heads produce a `header` element.  This may be changed using\nthe `compType` property which may be set to `'div'`, `'header'`, or `'section'`.\n\nMany times, some of the page head content is not printed.  For instance, it is\nusually not necessary to print the main navigation or the share-this links since\nthey are not very useful in printed versions.\n\n**`Page.Body`**\n\nRepresents the main region of a page and it contains the meat of a page.  It\nis not uncommon for a page to have multiple page bodies.\n\nBy default, page bodies produce a `div` element.  This may be changed using\nthe `compType` property which may be set to `'article'`, `'div'`, `'main'`, or\n`'section'`.\n\n**`Page.Sidebar`**\n\nRepresents the sidebar region of a page and it contains content that is\ntangentially related to the surrounding content.  It is not uncommon for a page\nto have multiple sidebars.\n\nBy default, page sidebars produce an `aside` element.  This may be changed using\nthe `compType` property which may be set to `'aside'`, `'div'`, or `'section'`.\n\n**`Page.Foot`**\n\nRepresents the bottom region of a page.  It is okay to have more than one page\nfoot.  Usually they follow one after the other.  Typically, the last page foot\nwill contain site-wide content such as a list of links, legal information, and\nmore.  Sometimes, a page will have a page foot above (that is, comes before) the\nside-wide page foot.  This page foot will usually contain information about its\nsection (which are typically represented by `Page.Body` components) such as who\nwrote it, links to related documents, copyright data, and the like.\n\nBy default, page foots (intentionally not using feet) produce a `footer`\nelement.  This may be changed using the `compType` property which may be set to\n`'div'`, `'footer'`, or `'section'`.\n\nMany times, some of the page foot content is not printed.  For instance, it is\nusually not necessary to print the list of links since they are not very useful\nin printed versions.\n\n\n## Example Usage\n\nA typical use case is in a single-page application (SPA) where each page is\nrendered by top-level routes.\n\nPlease examine the following example closely to get a better feel for how to use\nthe page related components semantically.\n\n```jsx\n// AboutPage.jsx\nimport React from 'react'\n\nimport Page from '@qc/react-page'\n\nimport '@qc/react-page/umd/react-page.css'\n\nexport default function AboutPage(props) {\n  return (\n    \u003cPage className=\"AboutPage\"\u003e\n      \u003cPage.Head className=\"is-SiteWide\"\u003e\n        \u003cSiteHeader/\u003e\n      \u003c/Page.Head\u003e\n      \u003cPage.Body compType=\"main\"\u003e\n        \u003ch1\u003eAbout Us\u003c/h1\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur...\u003c/p\u003e\n      \u003c/Page.Body\u003e\n      \u003cPage.Foot className=\"is-PageSpecific\"\u003e\n        \u003cTestimonials/\u003e\n      \u003c/Page.Foot\u003e\n      \u003cPage.Foot className=\"is-SiteWide\"\u003e\n        \u003cSiteFooter/\u003e\n      \u003c/Page.Foot\u003e\n    \u003c/Page\u003e\n  )\n}\n```\n\n```jsx\n// HomePage.jsx\nimport React from 'react'\n\nimport Page from '@qc/react-page'\n\nimport '@qc/react-page/umd/react-page.css'\n\nexport default function HomePage(props) {\n  return (\n    \u003cPage className=\"HomePage\"\u003e\n      \u003cPage.Head className=\"is-SiteWide\"\u003e\n        \u003cSiteHeader/\u003e\n      \u003c/Page.Head\u003e\n      \u003cPage.Body compType=\"section\"\u003e\n        \u003cObligatoryCarousel/\u003e\n      \u003c/Page.Body\u003e\n      \u003cPage.Body compType=\"section\"\u003e\n        \u003ch1\u003eWhy Us?\u003c/h1\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur...\u003c/p\u003e\n      \u003c/Page.Body\u003e\n      \u003cPage.Body compType=\"section\"\u003e\n        \u003ch1\u003eProducts\u003c/h1\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur...\u003c/p\u003e\n      \u003c/Page.Body\u003e\n      \u003cPage.Body compType=\"section\"\u003e\n        \u003ch1\u003eServices\u003c/h1\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur...\u003c/p\u003e\n      \u003c/Page.Body\u003e\n      \u003cPage.Body compType=\"section\"\u003e\n        \u003ch1\u003eOur Sponsors\u003c/h1\u003e\n        \u003cSponsorList/\u003e\n      \u003c/Page.Body\u003e\n      \u003cPage.Foot className=\"is-SiteWide\"\u003e\n        \u003cSiteFooter/\u003e\n      \u003c/Page.Foot\u003e\n    \u003c/Page\u003e\n  )\n}\n```\n\n```jsx\n// SomeBlogPage.jsx\nimport React from 'react'\n\nimport Page from '@qc/react-page'\n\nimport '@qc/react-page/umd/react-page.css'\n\nexport default function SomeBlogPage(props) {\n  return (\n    \u003cPage className=\"SomeBlogPage\"\u003e\n      \u003cPage.Head className=\"is-SiteWide\"\u003e\n        \u003cSiteHeader/\u003e\n      \u003c/Page.Head\u003e\n      \u003cPage.Head className=\"is-PageSpecific\"\u003e\n        \u003cBlogNav/\u003e\n        \u003cShareLinks/\u003e\n      \u003c/Page.Head\u003e\n      \u003cPage.Body compType=\"article\"\u003e\n        \u003ch1\u003eSome Blog Page\u003c/h1\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur...\u003c/p\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur...\u003c/p\u003e\n        \u003caside\u003eAdvertisement...\u003c/aside\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur...\u003c/p\u003e\n      \u003c/Page.Body\u003e\n      \u003cPage.Sidebar\u003e\n        \u003cRelatedLinks/\u003e\n        \u003cTagCloud/\u003e\n        \u003cEtc/\u003e\n      \u003c/Page.Sidebar\u003e\n      \u003cPage.Foot className=\"is-PageSpecific\"\u003e\n        \u003cRelatedBlogLinks/\u003e\n        \u003cBlogComments/\u003e\n      \u003c/Page.Foot\u003e\n      \u003cPage.Foot className=\"is-SiteWide\"\u003e\n        \u003cSiteFooter/\u003e\n      \u003c/Page.Foot\u003e\n    \u003c/Page\u003e\n  )\n}\n```\n\n```jsx\n// App.jsx\nimport React from 'react'\nimport { Route } from 'react-router'\n\nimport AboutPage from './AboutPage'\nimport HomePage from './HomePage'\nimport SomeBlogPage from './SomeBlogPage'\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv class=\"App\"\u003e\n        \u003cRoute exact path=\"/\" component={HomePage}/\u003e\n        \u003cRoute path=\"/about\" component={AboutPage}/\u003e\n        \u003cRoute path=\"/blog/some\" component={SomeBlogPage}/\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n```jsx\n// index.jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { BrowserRouter } from 'react-router-dom'\n\nimport App from './App'\n\nReactDOM.render(\n  \u003cBrowserRouter\u003e\n    \u003cApp/\u003e\n  \u003c/BrowserRouter\u003e,\n  document.getElementById('root')\n)\n```\n\n\n## Use with React-Bootstrap\n\nThe following demonstrates some typical uses of `react-bootstrap`'s \"layout\"\ncomponents with `@qc/react-page` components.\n\n```jsx\nimport React from 'react'\nimport { Carousel, Col, Grid, Row } from 'react-bootstrap'\nimport Page from '@qc/react-page'\n\nimport '@qc/react-page/umd/react-page.css'\n\nclass HomePage extends React.Component {\n  render() {\n    return (\n      \u003cPage className=\"HomePage\"\u003e\n        \u003cPage.Head className=\"is-SiteWide  SiteHeader\"\u003e\n          \u003cGrid\u003e\n            \u003cRow\u003e\n              \u003cCol xs={4}\u003e\n                \u003cimg alt=\"brand\" src=\"...\"/\u003e\n              \u003c/Col\u003e\n              \u003cCol xs={8}\u003e\n                \u003cnav className=\"MainNav\"\u003e\n                  ...\n                \u003c/nav\u003e\n              \u003c/Col\u003e\n            \u003c/Row\u003e\n          \u003c/Grid\u003e\n        \u003c/Page.Head\u003e\n        {/*\n        Notice how the following page body is not being width-constrained with\n        a `Grid` component since carousels typically span the full page width.\n        */}\n        \u003cPage.Body\u003e\n          \u003cCarousel/\u003e\n        \u003c/Page.Body\u003e\n        \u003cPage.Body\u003e\n          \u003cGrid\u003e\n            \u003cRow\u003e\n              \u003cCol xs={12} smOffset={3} sm={6}\u003e...\u003c/Col\u003e\n            \u003c/Row\u003e\n            \u003cRow\u003e\n              \u003cCol xs={12} sm={6}\u003e...\u003c/Col\u003e\n              \u003cCol xs={12} sm={6}\u003e...\u003c/Col\u003e\n            \u003c/Row\u003e\n          \u003c/Grid\u003e\n        \u003c/Page.Body\u003e\n        \u003cPage.Foot className=\"is-SiteWide  SiteFooter\"\u003e\n          \u003cGrid\u003e\n            \u003cRow\u003e\n              \u003cCol md={4}\u003e\n                \u003cSiteLinks/\u003e\n              \u003c/Col\u003e\n              \u003cCol md={4}\u003e\n                \u003cLegalStuff/\u003e\n              \u003c/Col\u003e\n              \u003cCol md={4}\u003e\n                \u003cOtherStuff/\u003e\n              \u003c/Col\u003e\n            \u003c/Row\u003e\n          \u003c/Grid\u003e\n        \u003c/Page.Foot\u003e\n      \u003c/Page\u003e\n    )\n  }\n}\n```\n\n\n## Use ES Modules\n\nThis package also comes with the source and an ES variation.  Instead of\n\n```jsx\nimport Page from '@qc/react-page'\n```\n\nuse\n\n```jsx\nimport Page from '@qc/react-page/es'\n```\n\nor\n\n```jsx\nimport Page from '@qc/react-page/src'\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## Importing Only the Components Needed\n\nUse only the import statements needed.\n\n```jsx\nimport Page from '@qc/react-page/lib/Page'\nimport PageHead from '@qc/react-page/lib/PageHead'\nimport PageBody from '@qc/react-page/lib/PageBody'\nimport PageSidebar from '@qc/react-page/lib/PageSidebar'\nimport PageFoot from '@qc/react-page/lib/PageFoot'\n```\n\n```jsx\nimport Page from '@qc/react-page/es/Page'\nimport PageHead from '@qc/react-page/es/PageHead'\nimport PageBody from '@qc/react-page/es/PageBody'\nimport PageSidebar from '@qc/react-page/es/PageSidebar'\nimport PageFoot from '@qc/react-page/es/PageFoot'\n```\n\n```jsx\nimport Page from '@qc/react-page/src/Page'\nimport PageHead from '@qc/react-page/src/PageHead'\nimport PageBody from '@qc/react-page/src/PageBody'\nimport PageSidebar from '@qc/react-page/src/PageSidebar'\nimport PageFoot from '@qc/react-page/src/PageFoot'\n```\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-layer][qc-react-layer]\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-page/badge.svg?branch=master\n[coverage-url]: https://coveralls.io/github/hypersoftllc/qc-react-page?branch=master\n[downloads-image]: http://img.shields.io/npm/dm/@qc/react-page.svg\n[downloads-url]: http://npm-stat.com/charts.html?package=@qc/react-page\n[license-image]: http://img.shields.io/npm/l/@qc/react-page.svg\n[license-url]: LICENSE\n[package-url]: https://npmjs.org/package/@qc/react-page\n[npm-badge-png]: https://nodei.co/npm/@qc/react-page.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-layer]: https://www.npmjs.com/package/@qc/react-layer\n[whatwg]: https://whatwg.org/\n[whatwg-headings-sections]: https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections\n[whatwg-outline]: https://html.spec.whatwg.org/multipage/sections.html#outlines\n[whatwg-semantics]: https://html.spec.whatwg.org/multipage/dom.html#semantics-2\n[travis-svg]: https://travis-ci.org/hypersoftllc/qc-react-page.svg?branch=master\n[travis-url]: https://travis-ci.org/hypersoftllc/qc-react-page\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypersoftllc%2Fqc-react-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhypersoftllc%2Fqc-react-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypersoftllc%2Fqc-react-page/lists"}