# @gk-lab/sectionsrenderer

> basic sectionsrenderer

Latest version **0.1.7** (published 2021-04-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install @gk-lab/sectionsrenderer
pnpm add @gk-lab/sectionsrenderer
yarn add @gk-lab/sectionsrenderer
bun add @gk-lab/sectionsrenderer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2021-04-07 |
| First published | 2021-01-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 31.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | stentwo |
| Maintainers | gk-lab |

## Links

- npm: https://www.npmjs.com/package/@gk-lab/sectionsrenderer
- Repository: https://github.com/stentwo/sectionsrenderer
- Homepage: https://github.com/stentwo/sectionsrenderer#readme
- Issues: https://github.com/stentwo/sectionsrenderer/issues
- npm.io page: https://npm.io/package/@gk-lab/sectionsrenderer

## Dependencies (14)

- [react](https://npm.io/package/react.md) ^17.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [typescript](https://npm.io/package/typescript.md) ^4.1.3
- [react-router](https://npm.io/package/react-router.md) ^5.2.0
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.1
- [create-exports-index](https://npm.io/package/create-exports-index.md) ^1.3.0
- [@gk-lab/routerenderer](https://npm.io/package/@gk-lab/routerenderer.md) ^0.1.3
- [smoothscroll-polyfill](https://npm.io/package/smoothscroll-polyfill.md) ^0.4.4
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Recent versions

- 0.1.7 (latest) — 2021-04-07
- 0.1.6 — 2021-04-07
- 0.1.5 — 2021-04-06
- 0.1.4 — 2021-01-19
- 0.1.3 — 2021-01-19
- 0.1.2 — 2021-01-19
- 0.1.1 — 2021-01-16
- 0.1.0 — 2021-01-16
- 0.0.3 — 2021-01-16
- 0.0.2 — 2021-01-16
- 0.0.1 — 2021-01-16

## README

# SectionsRenderer

Simply container to arrange sections and update the hash on scroll

```
import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import styled from 'styled-components'
import GlobalStyle from './GlobalStyle'
import SectionsRenderer from './components/SectionsRenderer/SectionsRenderer'
import {ScrollToProvider} from './components/ScrollToContext/ScrollToContext'

const StyledApp = styled.main`
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  font-size: 2rem;
`

const StyledSection = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  min-height: 100vh;
  max-height: unset;
  width: 100%;
`

const StyledFooter = styled(StyledSection)`
  min-height: 55vh;
  max-height: 55vh;
`

const App = () => {

  const sections = [
    {
      url: "home",
      image: {
        url: "stage-background.jpg",
      }
    },
    {
      url: "page1",
      image: {
        url: "stage-background.jpg",
      }
    },
    {
      url: "page2",
      image: {
        url: "stage-background.jpg",
      }
    },
    {
      url: "page3",
      image: {
        url: "stage-background.jpg",
      }
    },
    {
      url: "footer",
      image: {
        url: "stage-background.jpg",
      }
    }
  ]

  const pages = {
    'home': <StyledSection>Section Home</StyledSection>,
    'page1': <StyledSection>Section Page1</StyledSection>,
    'page2': <StyledSection>Section Page2</StyledSection>,
    'page3': <StyledSection>Section Page3</StyledSection>,
    'page3/subpage1': <StyledSection>Section Page3 / Subpage1</StyledSection>,
    'footer': <StyledFooter>Section Footer</StyledFooter>,
  }

  return (
    <BrowserRouter>
      <ScrollToProvider>
        <StyledApp>
          <GlobalStyle />
          <SectionsRenderer
            id="main-sections"
            lockScroll={false}
            sections={sections}
            pages={pages}
          />
        </StyledApp>
      </ScrollToProvider>
    </BrowserRouter>
  )
}

App.propTypes = {}
App.defaultProps = {}

export default App

```

---
_Source: https://npm.io/package/@gk-lab/sectionsrenderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._