<ThemeProvider theme={theme}>
  <>
    <StyledPage>
      <Meta siteName={siteName} />
      {/* TODO add Header */}
      <Header />
      <Inner>{children}</Inner>
      {/* TODO add Footer */}
      {/* TODO add QuickAction */}
    </StyledPage>
    <GlobalStyle theme={theme} />
  </>
</ThemeProvider>
function isInViewportAddClass(element) {
  if (typeof isInViewportAddClass.elements === 'undefined') {
    isInViewportAddClass.elements = [];
  }
  if (element instanceof Element) isInViewportAddClass.elements.push(element);
  isInViewportAddClass.elements.forEach(ele => {
    if (isInViewport(ele)) {
      if (!ele.classList.contains('in-viewport')) {
        ele.classList.add('in-viewport');
      }
    } else if (ele.classList.contains('in-viewport')) {
      ele.classList.remove('in-viewport');
    }
  });
  return element;
}
html {
  box-sizing: border-box;
  font-size: 10px;
}
*,  *:before, *:after {
  box-sizing: border-box;
}
<ThemeProvider theme={theme}>
  <>
    <StyledPage>
      <Meta siteName={siteName} />
      {/* TODO add Header */}
      <Header />
      <Inner>{children}</Inner>
      {/* TODO add Footer */}
      {/* TODO add QuickAction */}
    </StyledPage>
    <GlobalStyle theme={theme} />
  </>
</ThemeProvider>
function isInViewportAddClass(element) {
  if (typeof isInViewportAddClass.elements === 'undefined') {
    isInViewportAddClass.elements = [];
  }
  if (element instanceof Element) isInViewportAddClass.elements.push(element);
  isInViewportAddClass.elements.forEach(ele => {
    if (isInViewport(ele)) {
      if (!ele.classList.contains('in-viewport')) {
        ele.classList.add('in-viewport');
      }
    } else if (ele.classList.contains('in-viewport')) {
      ele.classList.remove('in-viewport');
    }
  });
  return element;
}
html {
  box-sizing: border-box;
  font-size: 10px;
}
*,  *:before, *:after {
  box-sizing: border-box;
}

I'm a Full Stack Web Developer making exciting apps.

I create practical products as a freelance developer, graphic designer, and entrepreneur.