# @gk-lab/routerenderer

> basic routerenderer

Latest version **0.1.3** (published 2021-03-07) · ISC license · 0 weekly downloads

## Install

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

## 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.3 |
| Published | 2021-03-07 |
| First published | 2021-01-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | stentwo |
| Maintainers | gk-lab |

## Links

- npm: https://www.npmjs.com/package/@gk-lab/routerenderer
- Issues: https://github.com/stentwo/routerenderer/issues
- npm.io page: https://npm.io/package/@gk-lab/routerenderer

## Dependencies (12)

- [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
- [@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.3 (latest) — 2021-03-07
- 0.1.2 — 2021-03-07
- 0.1.1 — 2021-01-19
- 0.1.0 — 2021-01-16
- 0.0.1 — 2021-01-16

## README

# @gk-lab/routerenderer

Takes a set of {url: node} and creates a list of Routes

```
import React from 'react'
import styled from 'styled-components'
import { useHistory } from 'react-router'
import GlobalStyle from './GlobalStyle'
import RouteRenderer from './RouteRenderer/RouteRenderer'

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

const StyledSection = styled.div`
  min-height: 100vh;
  width: 100%;
`
const StyledFooter = styled.div`
  min-height: 55vh;
  width: 100%;
`

const App = () => {
  const history = useHistory()

  const onClose = () => {
    history.goBack()
  }

  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 (
    <StyledApp>
      <GlobalStyle />
      <nav>
        {Object.keys(pages).map(path => {
          return <a key={path} href={path}>{path}</a>
        })}
      </nav>
      <RouteRenderer
        id='route-wrapper'
        pages={pages}
        onClose={onClose}
      />
    </StyledApp>
  )
}
```

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