# query-params-data

> A React, Typescript, and Parcel boilerplate

Latest version **0.2.2** (published 2020-03-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install query-params-data
pnpm add query-params-data
yarn add query-params-data
bun add query-params-data
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2020-03-11 |
| First published | 2020-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 16.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ethan Hathaway |
| Maintainers | erhathaway |

## Links

- npm: https://www.npmjs.com/package/query-params-data
- Repository: https://github.com/erhathaway/query-params-data
- Homepage: https://github.com/erhathaway/query-params-data#readme
- Issues: https://github.com/erhathaway/query-params-data/issues
- npm.io page: https://npm.io/package/query-params-data

## Dependencies (7)

- [mobx](https://npm.io/package/mobx.md) ^5.15.4
- [react](https://npm.io/package/react.md) ^16.13.0
- [animejs](https://npm.io/package/animejs.md) ^3.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.0
- [mobx-react](https://npm.io/package/mobx-react.md) ^6.1.8
- [query-string](https://npm.io/package/query-string.md) ^6.11.1
- [styled-components](https://npm.io/package/styled-components.md) ^4.4.1

## Recent versions

- 0.2.2 (latest) — 2020-03-11
- 0.2.1 — 2020-03-11
- 0.2.0 — 2020-03-11
- 0.1.1 — 2020-03-09
- 0.1.0 — 2020-03-09

## README

# query-params-data

[![Actions Status](https://github.com/erhathaway/query-params-data/workflows/Continous%20Integration/badge.svg)](https://github.com/erhathaway/query-params-data/actions)

![](https://api.dependabot.com/badges/status?host=github&repo=erhathaway/query-params-data)

Easily control data in query params.

-   set data at a specific query param
-   subscribe to changes of data at different query param keys.

# Usage

```typescript
import UrlStore from 'query-params-data';

// control the `user_id` query param
const userIdUrlStore = new UrlStore('user_id');

// set data to the `user_id` query param
userIdUrlStore.setState('1');

// subscribe to changes of the `user_id` query param or get the existing state at startup
const onChange = state => console.log(`The current user id is ${state}`);
userIdUrlStore.subscribeToStateChanges(onChange);
```

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