@gk-lab/sectionsrenderer v0.1.7

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