Socket
Socket
Sign inDemoInstall

use-query-params

Package Overview
Dependencies
Maintainers
1
Versions
41
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-query-params - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

6

lib/index.d.ts

@@ -1,6 +0,6 @@

export * from './serialize';
export * from './params';
export * from 'serialize-query-params';
export * from './types';
export { useQueryParam } from './useQueryParam';
export { useQueryParams, encodeQueryParams } from './useQueryParams';
export { useQueryParams } from './useQueryParams';
export { updateUrlQuery } from './updateUrlQuery';
export { QueryParamProvider, QueryParamContext, QueryParamContextValue, } from './QueryParamProvider';

6

lib/index.js

@@ -6,4 +6,3 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./serialize"));
__export(require("./params"));
__export(require("serialize-query-params"));
var useQueryParam_1 = require("./useQueryParam");

@@ -13,5 +12,6 @@ exports.useQueryParam = useQueryParam_1.useQueryParam;

exports.useQueryParams = useQueryParams_1.useQueryParams;
exports.encodeQueryParams = useQueryParams_1.encodeQueryParams;
var updateUrlQuery_1 = require("./updateUrlQuery");
exports.updateUrlQuery = updateUrlQuery_1.updateUrlQuery;
var QueryParamProvider_1 = require("./QueryParamProvider");
exports.QueryParamProvider = QueryParamProvider_1.QueryParamProvider;
exports.QueryParamContext = QueryParamProvider_1.QueryParamContext;

6

lib/QueryParamProvider.d.ts
import * as React from 'react';
import { PushReplaceHistory, ExtendedLocation } from './types';
import { PushReplaceHistory } from './types';
/**

@@ -19,3 +19,3 @@ * Subset of a @reach/router history object. We only

history: PushReplaceHistory;
location: ExtendedLocation;
location: Location;
}

@@ -40,3 +40,3 @@ export declare const QueryParamContext: React.Context<QueryParamContextValue>;

*/
location?: ExtendedLocation;
location?: Location;
}

@@ -43,0 +43,0 @@ /**

47

lib/types.d.ts

@@ -0,1 +1,2 @@

import { QueryParamConfigMap, DecodedValueMap } from 'serialize-query-params';
/**

@@ -19,50 +20,4 @@ * Different methods for updating the URL:

/**
* Location optionally extended with a query field
*/
export interface ExtendedLocation extends Location {
query?: {
[param: string]: string;
};
}
/**
* Encoded query parameters (all strings)
*/
export interface EncodedQuery {
[key: string]: string | string[];
}
/**
* Encoded query parameters, possibly including null or undefined values
*/
export interface EncodedQueryWithNulls {
[key: string]: string | string[] | null | undefined;
}
/**
* Configuration for a query param specifying how to encode it
* (convert it to a string) and decode it (convert it from a string
* back to its native type)
*
* D = type to be encoded
* D2 = type from decode (typically = D)
*/
export interface QueryParamConfig<D, D2 = D> {
/** Convert the query param value to a string */
encode: (value: D) => string | string[] | undefined;
/** Convert the query param string value to its native type */
decode: (value: string | string[]) => D2;
}
/**
* Mapping from a query parameter name to a { encode, decode } config
*/
export interface QueryParamConfigMap {
[paramName: string]: QueryParamConfig<any, any>;
}
/**
* Mapping from a query parameter name to it's decoded value type
*/
export declare type DecodedValueMap<QPCMap extends QueryParamConfigMap> = {
[P in keyof QPCMap]: ReturnType<QPCMap[P]['decode']>;
};
/**
* The setter function signature mapping
*/
export declare type SetQuery<QPCMap extends QueryParamConfigMap> = (changes: Partial<DecodedValueMap<QPCMap>>, updateType?: UrlUpdateType) => void;

3

lib/updateUrlQuery.d.ts

@@ -1,2 +0,3 @@

import { PushReplaceHistory, UrlUpdateType, EncodedQueryWithNulls } from './types';
import { EncodedQueryWithNulls } from 'serialize-query-params';
import { PushReplaceHistory, UrlUpdateType } from './types';
/**

@@ -3,0 +4,0 @@ * Updates the URL to match the specified query changes.

61

lib/updateUrlQuery.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const query_string_1 = require("query-string");
const serialize_query_params_1 = require("serialize-query-params");
/**
* Mutates a location object to use the query parameters passed in
*/
function mergeLocationQueryOrSearch(location, newQuery) {
let newLocation;
// if location.query exists, update the query in location.
// otherwise update the search string
if (location.query) {
newLocation = Object.assign({}, location, { query: newQuery, search: '' });
}
else {
// replace location.search
const queryStr = query_string_1.stringify(newQuery);
const search = queryStr.length ? `?${queryStr}` : '';
newLocation = Object.assign({}, location, { search });
}
// update react router key
newLocation.key = `${Date.now()}`;
return newLocation;
}
/**
* remove query params that are nully or an empty strings.
* note: these values are assumed to be already encoded as strings.
*/
function filterNully(query) {
const filteredQuery = Object.keys(query).reduce((queryAccumulator, queryParam) => {
// get encoded value for this param
const encodedValue = query[queryParam];
// if it isn't null or empty string, add it to the accumulated obj
if (encodedValue != null && encodedValue !== '') {
queryAccumulator[queryParam] = encodedValue;
}
return queryAccumulator;
}, {});
return filteredQuery;
}
/**
* Update a location, wiping out parameters not included in newQuery
*/
function updateLocation(newQuery, location) {
return mergeLocationQueryOrSearch(location, filterNully(newQuery));
}
/**
* Update a location while retaining existing parameters
*/
function updateInLocation(queryReplacements, location) {
// if a query is there, use it, otherwise parse the search string
const currQuery = location.query || query_string_1.parse(location.search);
const newQuery = Object.assign({}, currQuery, queryReplacements);
return updateLocation(filterNully(newQuery), location);
}
/**
* Updates the URL to match the specified query changes.

@@ -64,12 +13,12 @@ * If replaceIn or pushIn are used as the updateType, then parameters

case 'replaceIn':
history.replace(updateInLocation(queryReplacements, location));
history.replace(serialize_query_params_1.updateInLocation(queryReplacements, location));
break;
case 'pushIn':
history.push(updateInLocation(queryReplacements, location));
history.push(serialize_query_params_1.updateInLocation(queryReplacements, location));
break;
case 'replace':
history.replace(updateLocation(queryReplacements, location));
history.replace(serialize_query_params_1.updateLocation(queryReplacements, location));
break;
case 'push':
history.push(updateLocation(queryReplacements, location));
history.push(serialize_query_params_1.updateLocation(queryReplacements, location));
break;

@@ -76,0 +25,0 @@ default:

5

lib/useQueryParam.d.ts

@@ -1,3 +0,2 @@

import { ParsedQuery } from 'query-string';
import { QueryParamConfig } from './types';
import { EncodedQueryWithNulls, QueryParamConfig } from 'serialize-query-params';
/**

@@ -17,2 +16,2 @@ * Given a query param name and query parameter configuration ({ encode, decode })

*/
export declare const useQueryParam: <D, D2 = D>(name: string, paramConfig?: QueryParamConfig<D, D2>, rawQuery?: ParsedQuery | undefined) => [D2 | undefined, (newValue: D, updateType?: "replace" | "replaceIn" | "push" | "pushIn" | undefined) => void];
export declare const useQueryParam: <D, D2 = D>(name: string, paramConfig?: QueryParamConfig<D, D2>, rawQuery?: EncodedQueryWithNulls | undefined) => [D2 | undefined, (newValue: D, updateType?: "replace" | "replaceIn" | "push" | "pushIn" | undefined) => void];

13

lib/useQueryParam.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const query_string_1 = require("query-string");
const serialize_query_params_1 = require("serialize-query-params");
const QueryParamProvider_1 = require("./QueryParamProvider");
const params_1 = require("./params");
const updateUrlQuery_1 = require("./updateUrlQuery");

@@ -22,9 +21,9 @@ /**

*/
exports.useQueryParam = (name, paramConfig = params_1.StringParam, rawQuery) => {
exports.useQueryParam = (name, paramConfig = serialize_query_params_1.StringParam, rawQuery) => {
const { history, location } = React.useContext(QueryParamProvider_1.QueryParamContext);
// read in the raw query
if (!rawQuery) {
rawQuery = React.useMemo(() => location.query ||
query_string_1.parse(location.search) ||
{}, [location.query, location.search]);
rawQuery = React.useMemo(() => serialize_query_params_1.parse(location.search) || {}, [
location.search,
]);
}

@@ -45,3 +44,3 @@ // read in the encoded string value

encodedValue instanceof Array
? query_string_1.stringify({ name: encodedValue })
? serialize_query_params_1.stringify({ name: encodedValue })
: encodedValue,

@@ -48,0 +47,0 @@ ]);

11

lib/useQueryParams.d.ts

@@ -1,11 +0,4 @@

import { EncodedQueryWithNulls, DecodedValueMap, SetQuery, QueryParamConfigMap } from './types';
import { DecodedValueMap, QueryParamConfigMap } from 'serialize-query-params';
import { SetQuery } from './types';
/**
* Convert the values in query to strings via the encode functions configured
* in paramConfigMap
*
* @param paramConfigMap Map from query name to { encode, decode } config
* @param query Query updates mapping param name to decoded value
*/
export declare function encodeQueryParams<QPCMap extends QueryParamConfigMap>(paramConfigMap: QPCMap, query: Partial<DecodedValueMap<QPCMap>>): EncodedQueryWithNulls;
/**
* Given a query parameter configuration (mapping query param name to { encode, decode }),

@@ -12,0 +5,0 @@ * return an object with the decoded values and a setter for updating them.

30

lib/useQueryParams.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const query_string_1 = require("query-string");
const serialize_query_params_1 = require("serialize-query-params");
const useQueryParam_1 = require("./useQueryParam");

@@ -9,24 +9,2 @@ const updateUrlQuery_1 = require("./updateUrlQuery");

/**
* Convert the values in query to strings via the encode functions configured
* in paramConfigMap
*
* @param paramConfigMap Map from query name to { encode, decode } config
* @param query Query updates mapping param name to decoded value
*/
function encodeQueryParams(paramConfigMap, query) {
const encodedChanges = {};
const changingParamNames = Object.keys(query);
for (const paramName of changingParamNames) {
if (!paramConfigMap[paramName]) {
if (process.env.NODE_ENV === 'development') {
console.warn(`Skipping encoding parameter ${paramName} since it was not configured.`);
}
continue;
}
encodedChanges[paramName] = paramConfigMap[paramName].encode(query[paramName]);
}
return encodedChanges;
}
exports.encodeQueryParams = encodeQueryParams;
/**
* Given a query parameter configuration (mapping query param name to { encode, decode }),

@@ -38,5 +16,3 @@ * return an object with the decoded values and a setter for updating them.

// read in the raw query
const rawQuery = React.useMemo(() => location.query ||
query_string_1.parse(location.search) ||
{}, [location.query, location.search]);
const rawQuery = React.useMemo(() => serialize_query_params_1.parse(location.search) || {}, [location.search]);
// parse each parameter via usQueryParam

@@ -51,3 +27,3 @@ const paramNames = Object.keys(paramConfigMap);

// encode as strings for the URL
const encodedChanges = encodeQueryParams(paramConfigMap, changes);
const encodedChanges = serialize_query_params_1.encodeQueryParams(paramConfigMap, changes);
// update the URL

@@ -54,0 +30,0 @@ updateUrlQuery_1.default(encodedChanges, location, history, updateType);

4

package.json
{
"name": "use-query-params",
"version": "0.2.0",
"version": "0.3.0",
"description": "React Hook for managing state in URL query parameters with easy serialization.",

@@ -56,4 +56,4 @@ "main": "lib/index.js",

"dependencies": {
"query-string": "^6.3.0"
"serialize-query-params": "^0.1.0"
}
}

16

README.md

@@ -9,3 +9,4 @@ <div align="center">

<p>
<img alt="npm" src="https://img.shields.io/npm/v/use-query-params.svg">
<a href="https://www.npmjs.com/package/use-query-params"><img alt="npm" src="https://img.shields.io/npm/v/use-query-params.svg"></a>
<a href="https://travis-ci.com/pbeshai/use-query-params/"><img alt="Travis (.com)" src="https://img.shields.io/travis/com/pbeshai/use-query-params.svg"></a>

@@ -24,3 +25,3 @@ </p>

When creating apps with easily shareable URLs, you often want to encode state as query parameters, but all query parameters must be encoded as strings. `useQueryParams` allows you to easily encode and decode data of any type as query parameters with smart memoization to prevent creating unnecessary duplicate objects.
When creating apps with easily shareable URLs, you often want to encode state as query parameters, but all query parameters must be encoded as strings. `useQueryParams` allows you to easily encode and decode data of any type as query parameters with smart memoization to prevent creating unnecessary duplicate objects. It uses [serialize-query-params](https://github.com/pbeshai/serialize-query-params).

@@ -141,5 +142,7 @@ **Not ready for hooks?** Check out [react-url-query](https://github.com/pbeshai/react-url-query) for a higher-order component (HOC) approach.

- [QueryParamProvider](#queryparamprovider)
- [Type Definitions](https://github.com/pbeshai/use-query-params/blob/master/src/types.ts)
- [Serialization Utility Functions](https://github.com/pbeshai/use-query-params/blob/master/src/serialize.ts)
- [Type Definitions](https://github.com/pbeshai/use-query-params/blob/master/src/types.ts) and from [serialize-query-params](https://github.com/pbeshai/serialize-query-params/blob/master/src/types.ts).
- [Serialization Utility Functions](https://github.com/pbeshai/serialize-query-params/blob/master/src/serialize.ts)
For convenience, use-query-params exports all of the [serialize-query-params](https://github.com/pbeshai/serialize-query-params) library. This includes most functions from [query-string](https://github.com/sindresorhus/query-string), which is used internally.
#### UrlUpdateType

@@ -156,3 +159,3 @@

#### Param Types
See [all param definitions here](https://github.com/pbeshai/use-query-params/blob/master/src/params.ts). You can define your own parameter types by creating an object with an `encode` and a `decode` function. See the existing definitions for examples.
See [all param definitions from serialize-query-params here](https://github.com/pbeshai/serialize-query-params/blob/master/src/params.ts). You can define your own parameter types by creating an object with an `encode` and a `decode` function. See the existing definitions for examples.

@@ -307,4 +310,3 @@ Note that all nully values will encode and decode as `undefined`.

```js
import { stringify } from 'query-string';
import { encodeQueryParams, NumberParam } from 'use-query-params';
import { encodeQueryParams, NumberParam, stringify } from 'use-query-params';

@@ -311,0 +313,0 @@ // encode each parameter according to the configuration

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc