useUrlSearchParams

Hook that provides reactive URLSearchParams

browser

test coverage

Last changed: 6 days ago

Installation

Library

CLI

Manual

import { useUrlSearchParams } from '@siberiacancode/reactuse';

Usage

const { value, set } = useUrlSearchParams({ initialValue: { page: 1 } });
// or
const { value, set } = useUrlSearchParams({ page: 1 });

Demo

source

Api

Parameters

Name	Type	Default	Note
options	UseUrlSearchParamsOptions<Value> & { initialValue: UseUrlSearchParamsInitialValue<Value> }	-	The options object with required initialValue
options.initialValue?	UseUrlSearchParamsInitialValue<Value>	-	The initial value for the url params
options.mode?	UrlSearchParamsMode	'history'	The mode to use for the URL ('history' | 'hash-params' | 'hash')
options.write?	'push' | 'replace'	'replace'	The mode to use for writing to the URL
options.serializer?	(value: Value[keyof Value]) => string	-	Custom serializer function to convert value to string
options.deserializer?	(value: string) => Value[keyof Value]	-	Custom deserializer function to convert string to value

Returns

UseUrlSearchParamsReturn<Value>

Parameters

Name	Type	Default	Note
initialValue?	UseUrlSearchParamsInitialValue<Value>	-	The initial value for the url params

Returns

UseUrlSearchParamsReturn<Value>

Type declaration

export type UrlParams = Record<string, any>;

export type UrlSearchParamsMode = 'hash-params' | 'hash' | 'history';

export interface UseUrlSearchParamsSetOptions {
  /** The mode to use for writing to the URL */
  write?: 'push' | 'replace';
}

export type UseUrlSearchParamsInitialValue<Value> = (() => Value) | Value;

export interface UseUrlSearchParamsOptions<Value> {
  /* The initial value of the url search params */
  initialValue?: UseUrlSearchParamsInitialValue<string | URLSearchParams | Value>;
  /** The mode to use for writing to the URL */
  mode?: UrlSearchParamsMode;
  /** The mode to use for writing to the URL  */
  write?: 'push' | 'replace';
  /* The deserializer function to be invoked */
  deserializer?: (value: string) => Value[keyof Value];
  /* The serializer function to be invoked */
  serializer?: (value: Value[keyof Value]) => string;
}

export interface UseUrlSearchParamsReturn<Value> {
  /** The value of the url search params */
  value: Value;
  /** The set function */
  set: (value: Partial<Value>, options?: UseUrlSearchParamsSetOptions) => void;
}

export interface UseUrlSearchParams {
  <Value>(
    key: string,
    options: UseUrlSearchParamsOptions<Value> & {
      initialValue: UseUrlSearchParamsInitialValue<Value>;
    }
  ): UseUrlSearchParamsReturn<Value>;

  <Value>(options?: UseUrlSearchParamsOptions<Value>): UseUrlSearchParamsReturn<Value | undefined>;

  <Value>(initialValue: UseUrlSearchParamsInitialValue<Value>): UseUrlSearchParamsReturn<Value>;

  <Value>(key: string): UseUrlSearchParamsReturn<Value | undefined>;
}

Source

Source • Demo

Contributors

B

babin

D

debabin

V

VLADISLAW9