# rhea-nav

> react navigation

Latest version **1.0.9** (published 2019-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install rhea-nav
pnpm add rhea-nav
yarn add rhea-nav
bun add rhea-nav
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2019-04-12 |
| First published | 2019-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 6 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | RobLMartin |
| Maintainers | robfella |

## Links

- npm: https://www.npmjs.com/package/rhea-nav
- npm.io page: https://npm.io/package/rhea-nav

## Dependencies (6)

- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.3.1
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^3.9.2
- [styled-components](https://npm.io/package/styled-components.md) ^4.1.3
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.4
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.15
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.7.2

## Recent versions

- 1.0.9 (latest) — 2019-04-12
- 1.0.8 — 2019-04-12
- 1.0.7 — 2019-04-11

## README

# Simple nav using Fontawesome icons, React Router Dom, and Material-ui!

> react navigation

[![NPM](https://img.shields.io/npm/v/rhea-nav.svg)](https://www.npmjs.com/package/rhea-nav) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save rhea-nav
```

## Usage

```
import React, { Component } from "react";
import { NavBar, Canvas, AppWrapper, TopBar } from "rhea-nav";
import { BrowserRouter as Router } from "react-router-dom";
import Routes from "./routes";
import navigation from "./navigation";

class App extends Component {
  render() {
    return (
      <Router>
        <AppWrapper>
          <TopBar />
          <NavBar navigation={navigation} />
          <Canvas>
            <Routes />
          </Canvas>
        </AppWrapper>
      </Router>
    );
  }
}

export default App;

```

### NavBar

The NavBar is a component that accepts a navigation prop, create a navigation.js file and describe your nav.

```
import {
  faAddressBook,
  faChevronRight,
  faJedi,
  faBookDead,
  faLayerGroup,
  faHome,
  faIgloo
} from "@fortawesome/free-solid-svg-icons";
import logo from "./logo.svg";

const navigation = {
  logo: { icon: logo, to: "/" },
  nav: [
    { title: "Home", icon: faHome, to: "/home" },
    { title: "Address Book", icon: faAddressBook, to: "/address-book" },
    { title: "Jedi", icon: faJedi, to: "/jedi" },
    { title: "Dead Book", icon: faBookDead, to: "/dead-book" },
    { title: "Layer Group", icon: faLayerGroup, to: "/layer-group" }
  ],
  buttonIcon: faChevronRight
};

export default navigation;

```

### Canvas

Canvas is a component that wraps your routes, I would suggest creating a Route functional component that imports all app containers and routes them.

```
import React from "react";
import { Switch, Route } from "react-router-dom";
import Home from "./components/Home/Home";
import AddressBook from "./components/AddressBook/AddressBook";
import Jedi from "./components/Jedi/Jedi";
import DeadBook from "./components/DeadBook/DeadBook";
import LayerGroup from "./components/LayerGroup/LayerGroup";

const Routes = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/home" component={Home} />
    <Route exact path="/address-book" component={AddressBook} />
    <Route exact path="/jedi" component={Jedi} />
    <Route exact path="/dead-book" component={DeadBook} />
    <Route exact path="/layer-group" component={LayerGroup} />
  </Switch>
);

export default Routes;

```

### TopBar

In case you need a top bar.

## License

MIT © [RobLMartin](https://github.com/RobLMartin)

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