# @snappmarket/use-route-change

> > 🏹 detect when react router dom route changes ----

Latest version **0.2.5** (published 2020-04-14) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @snappmarket/use-route-change
pnpm add @snappmarket/use-route-change
yarn add @snappmarket/use-route-change
bun add @snappmarket/use-route-change
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.5 |
| Published | 2020-04-14 |
| First published | 2020-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 6.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 41 |
| Author | Jafar Rezaei |
| Maintainers | jrjs, mahsamesbah, milad.kiani, mostafa_rastegar, rezaerami |
| Keywords | hook, react-hooks, custom-hook, routeChangeDetect, routeChange-hook, useRouteChange |

## Links

- npm: https://www.npmjs.com/package/@snappmarket/use-route-change
- Repository: https://github.com/snappmarket/frontend-toolbox
- Homepage: https://github.com/snappmarket/frontend-toolbox/tree/master/packages/hooks/packages/useRouteChange
- Issues: https://github.com/snappmarket/frontend-toolbox/issues
- npm.io page: https://npm.io/package/@snappmarket/use-route-change

## 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.2.5 (latest) — 2020-04-14
- 0.2.3-beta.quq9rbw — 2020-04-09
- 0.2.3-beta.4cbesil — 2020-04-08
- 0.2.3-beta.qaoe83s — 2020-03-25
- 0.2.3 — 2020-03-17
- 0.2.1-beta.cswtgmi — 2020-03-11
- 0.2.1-alpha.0 — 2020-02-26
- 0.1.24 — 2020-02-26
- 0.1.22 — 2020-02-24
- 0.1.21 — 2020-02-10
- 0.1.20 — 2020-01-27
- 0.1.13 — 2020-01-26
- 0.1.11 — 2020-01-26
- 0.1.10 — 2020-01-26
- 0.1.6 — 2020-01-24
- … 1 more at https://npm.io/package/@snappmarket/use-route-change/versions

## README

# useRouteChange
> 🏹 detect when react router dom route changes
----

[![version](https://img.shields.io/npm/v/@snappmarket/use-route-change.svg?style=flat-square)](https://www.npmjs.com/package/@snappmarket/use-route-change)
[![downloads](https://img.shields.io/npm/dm/@snappmarket/use-route-change.svg?style=flat-square)](http://www.npmtrends.com/@snappmarket/use-route-change)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![MIT License](https://img.shields.io/npm/l/@snappmarket/use-route-change.svg?style=flat-square)](https://github.com/snappmarket/frontend-toolbox/tree/master/packages/useDidUpdateEffect/blob/master/LICENSE.md)

[![Watch on GitHub](https://img.shields.io/github/watchers/snappmarket/frontend-toolbox.svg?style=social)](https://github.com/snappmarket/frontend-toolbox/watchers)
[![Star on GitHub](https://img.shields.io/github/stars/snappmarket/frontend-toolbox.svg?style=social)](https://github.com/snappmarket/frontend-toolbox/stargazers)


## get started 
We provide two way of using this package `single` or `multi` :
```bash
npm i @snappmarket/use-route-change
OR
npm i @snappmarket/hooks
```

## usage 
```javascript
import useRouteChange from '@snappmarket/use-route-change';
// or 
// import { useRouteChange } from '@snappmarket/hooks';


const MyComponenet = props => {
  useRouteChange(() => {
    // do sth here
  });
};
```

### source code
```javascript
import { useState, useEffect } from 'react';

/**
 * Debounce setting a value
 * @param value
 * @param delay
 * @returns {[string, fn, fn]}
 */
export default function useDebounce(value, delay) {
  // State and setters for debounced value
  const [debouncedValue, setDebouncedValue] = useState(value);

  let handler;
  const canceller = () => {
    clearTimeout(handler);
  };

  useEffect(() => {
    handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return canceller;
  }, [value]);

  return [debouncedValue, canceller, setDebouncedValue];
}
```

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