# router1-react

> React components to use with router1

Latest version **0.9.2** (published 2019-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install router1-react
pnpm add router1-react
yarn add router1-react
bun add router1-react
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.2 |
| Published | 2019-03-13 |
| First published | 2015-12-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=0.12.0 |
| Dependencies | 2 |
| Unpacked size | 135.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bogdan Savluk |
| Maintainers | z_bodya |
| Keywords | router, rx, isomorphic, reactive, react |

## Links

- npm: https://www.npmjs.com/package/router1-react
- Repository: https://github.com/zxbodya/router1-react
- Homepage: https://github.com/zxbodya/router1-react#readme
- Issues: https://github.com/zxbodya/router1-react/issues
- npm.io page: https://npm.io/package/router1-react

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^1.9.3
- [router1](https://npm.io/package/router1.md) ^0.14.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.9.2 (latest) — 2019-03-13
- 0.9.1 — 2018-11-18
- 0.9.0 — 2018-11-05
- 0.8.2 — 2018-09-04
- 0.8.1 — 2018-04-26
- 0.8.0 — 2017-09-18
- 0.7.1 — 2017-04-09
- 0.7.0 — 2017-01-24
- 0.6.0 — 2016-12-20
- 0.5.0 — 2016-08-14
- 0.4.2 — 2016-07-03
- 0.4.1 — 2016-05-07
- 0.3.1 — 2016-05-07
- 0.3.0 — 2016-04-22
- 0.2.0 — 2016-04-22
- … 3 more at https://npm.io/package/router1-react/versions

## README

## Router1 React

React components to use [https://github.com/zxbodya/router1](router1) library in react js application.
 
### RouterContext

Used to pass `router` context variable into components when rendering.

can be used as following: 

```JSX

// router - router1 instance
// renderApp - function that will render your app virtual dom
 
ReactDOM.render(
  <RouterContext.Provider value={router}>
    ...
  </RouterContext.Provider>,
  appElement
);
```

### Link
 
Used to generate links with router1, will handle user clicks and can highlight active links.

```JSX
<Link route="contact" activeClassName="active" params={{routeParam: "value"}}>Contact</Link>
```
Also you can pass additional state data(to be used later when handling route change) using optional data param:
 

```JSX
<Link
  route="contact"
  activeClassName="active"
  params={{routeParam: "value"}}
  state={{ noscroll: true }}
>
  Contact
</Link>
```
### ActivateWrap

Similar to `Link` it can be used to highlight some block when route is active.

For example, when you need to add `active` class to `li` instead of link:

```JSX
<ActivateWrap route="contact" activeClassName="active" params={{routeParam: "value"}} component="li">
  <Link route="contact" params={{routeParam: "value"}}>Contact</Link>
</ActivateWrap>
```

### Example

See [router1-app-template](https://github.com/zxbodya/router1-app-template)

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