# react-withquerytoggler

> This is a React Higher Order Component (HOC), which lets you toggle values in the url. For example: when you have something like a filterbar in your app, which fetches new data React's `componentDidUpdate` lifecycle based on the url and its query string p

Latest version **0.0.2** (published 2018-09-18) · ISC license · 0 weekly downloads

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

## Install

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

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2018-09-18 |
| First published | 2018-09-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | trekinbami |

## Links

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

## Dependencies (1)

- [query-string](https://npm.io/package/query-string.md) ^6.1.0

## Recent versions

- 0.0.2 (latest) — 2018-09-18
- 0.0.1 — 2018-09-18

## README

## withQueryToggler

This is a React Higher Order Component (HOC), which lets you toggle values in the url. For example: when you have something like a filterbar in your app, which fetches new data React's `componentDidUpdate` lifecycle based on the url and its query string parameters.

### How to use

1. `$ npm install withquerytoggler`

2. Wrap it around your React component (check out `/src/App/App.jsx` for an example)

```javascript
import withQueryToggler from 'withquerytoggler';

class App extends Component {
  addValueToUrl = () => {
    const q = this.props.createQueryValues({ radius: '5' });
    this.props.handleQueryValues(q);
  }
  
  render() {
    return (
      <button 
        type='button' 
        onClick={this.addValueToUrl}
      >
        Add radius=5 to the url!
     </button>
    );
  }
}

export default withQueryToggler(App)
```

### API

withQueryToggler provides you with a couple of methods on your props

**`clearQueryValues: () => void`**

Resets all the query parameters in the url. Returns void.  

**`createQueryValues: (query, options) => Object`**

Maps to a nice Object for react-router from `query`. Check the examples below for more information. Second argument is the arrayFormat from [`query-string`](https://www.npmjs.com/package/query-string). Returns an Object.

**`handleQueryValues: (query, options) => void`**

Stringifies the query and uses React Router's `history.push` to add the values to the url. Use `options` to give an `arrayFormat`

**`getParsedQuery: (props) => void`**

Returns the current query parameters.

### Examples

##### Adding a single value:
```javascript
this.props.createQueryValues({ 
  radius: '5',
});
```

##### Removing a single value:
Set the value to an empty string to remove it from the url. 

```javascript
this.props.createQueryValues({ 
  radius: '',
});
```

##### Adding an Array:
```javascript
this.props.createQueryValues({ 
  areas: [
    ['Rotterdam', true], 
    ['Amsterdam', false]
  ], 
});
```

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