# route-interceptor

> A front-end generic route interceptor

Latest version **0.1.3** (published 2022-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install route-interceptor
pnpm add route-interceptor
yarn add route-interceptor
bun add route-interceptor
```

## 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.1.3 |
| Published | 2022-06-19 |
| First published | 2022-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 26 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | suchangv |
| Maintainers | suchangv |
| Keywords | React, Vue, Router, Interceptor |

## Links

- npm: https://www.npmjs.com/package/route-interceptor
- Repository: https://github.com/suchangv/route-interceptor
- Issues: https://github.com/suchangv/route-interceptor/issues
- npm.io page: https://npm.io/package/route-interceptor

## 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.1.3 (latest) — 2022-06-19
- 0.1.2 — 2022-06-19
- 0.1.1 — 2022-06-19
- 0.1.0 — 2022-06-19
- 0.0.9 — 2022-06-19

## README

<h1 align="center">Route Interceptor</h1>

## Introduction

This package can intercept front-end route jumps, Does not depend on any framework, So you can use it in React, Vue, etc.

## Online Demo

todo

## How to use

### 1. Installation

```shell
  npm i route-interceptor
```

### 2. Add this code where you like

```javascript
import { create } from "route-interceptor";

const interceptor = create({
  way: ["a", "window.open", "history", "hash", "location"],
  intercept: (path) => {
    return path.replace("/bbb", "/ccc");
  },
});

interceptor.start();
```

## API

| Parameter | Description             | Type                                                          | Default     |
| --------- | ----------------------- | ------------------------------------------------------------- | ----------- |
| way       | Way to be intercepted   | ('a' \| 'window.open' \| 'history' \| 'hash' \| 'location')[] | []          |
| intercept | intercept rule callback | () => string \| false                                         | () => false |

### way

#### a

Intercept Anchor tag jump, if Anchor tag has click event and called preventDefault, Will not be intercepted.

#### window.open

Intercept window.open

#### history

Will intercept both history.pushState and history.replaceState

#### hash

Intercept hash change, such as `location.hash = '#some'`

#### location

Because the origin location object can't be override, intercept `set location.href` and `location.replace`, You need to use Babel at the same time or use global object `$location` to jump.

This is type declaration for `$location`.

```typescript
interface Window {
  $location: Pick<Location, "href" | "replace">;
}
```

Use babel plugin.
```javascript
// .babelrc.js
module.exports = {
  plugins: ["route-interceptor/plugins/babel"],
};
```

How it works

```javascript
location.href = "https://www.google.com";
location.replace("https://www.google.com");
// will transform to
$location.href = "https://www.google.com";
$location.replace("https://www.google.com");
```

Only `location.href` and `location.replace` will be transformed.

> Can't support esbuild-loader, because esbuild transform api does't support plugin.

### intercept

return a new path to jump, or return `false` to stop jump

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