nuqs
Version:
Type-safe search params state manager for React - Like useState, but stored in the URL query string
975 lines (856 loc) • 36.9 kB
TypeScript
import { AdapterContext as AdapterContext_2 } from './context';
import { AdapterInterface as AdapterInterface_2 } from './defs';
import { Context } from 'react';
import { DetailedReactHTMLElement } from 'react';
import { Emitter } from 'mitt';
import { FunctionComponentElement } from 'react';
import { InputHTMLAttributes } from 'react';
import { ProviderProps } from 'react';
import { ReactNode } from 'react';
import type { TransitionStartFunction } from 'react';
import { unstable_AdapterContext as unstable_AdapterContext_2 } from './custom';
import { unstable_AdapterContext as unstable_AdapterContext_3 } from '../custom';
declare type AdapterContext = {
useAdapter: UseAdapterHook;
};
export { AdapterContext }
export { AdapterContext as unstable_AdapterContext }
declare type AdapterInterface = {
searchParams: URLSearchParams;
updateUrl: UpdateUrlFunction;
getSearchParamsSnapshot?: () => URLSearchParams;
rateLimitFactor?: number;
};
export { AdapterInterface }
export { AdapterInterface as unstable_AdapterInterface }
declare type AdapterOptions = Pick<Options, 'history' | 'scroll' | 'shallow'>;
export { AdapterOptions }
export { AdapterOptions as unstable_AdapterOptions }
declare type Base = string | URLSearchParams | URL;
export declare function compareSearchParams(a: SearchParams, b: SearchParams): boolean;
export declare function compose(fns: React.TransitionStartFunction[], final: () => void): void;
export declare const context: Context<AdapterContext>;
/**
* Create a custom adapter (context provider) for nuqs to work with your framework / router.
*
* Adapters are based on React Context,
*
* @param useAdapter
* @returns
*/
declare function createAdapterProvider(useAdapter: UseAdapterHook): ({ children, ...props }: {
children: ReactNode;
}) => FunctionComponentElement<ProviderProps<AdapterContext>>;
export { createAdapterProvider }
export { createAdapterProvider as unstable_createAdapterProvider }
declare function createLoader<Parsers extends ParserMap>(parsers: Parsers, { urlKeys }?: LoaderOptions<Parsers>): {
(input: LoaderInput, options?: LoaderOptions<Parsers>): inferParserType<Parsers>;
(input: Promise<LoaderInput>, options?: LoaderOptions<Parsers>): Promise<inferParserType<Parsers>>;
};
export { createLoader }
export { createLoader as createLoader_alias_1 }
export { createLoader as createLoader_alias_2 }
/**
* Wrap a set of parse/serialize functions into a builder pattern parser
* you can pass to one of the hooks, making its default value type safe.
*/
declare function createParser<T>(parser: Require<Parser<T>, 'parse' | 'serialize'>): ParserBuilder<T>;
export { createParser }
export { createParser as createParser_alias_1 }
export { createParser as createParser_alias_2 }
export declare function createReactRouterBasedAdapter({ adapter, useNavigate, useSearchParams }: CreateReactRouterBasedAdapterArgs): {
NuqsAdapter: ({ children, ...props }: {
children: ReactNode;
}) => FunctionComponentElement<ProviderProps<AdapterContext_2>>;
useOptimisticSearchParams: () => URLSearchParams;
};
declare type CreateReactRouterBasedAdapterArgs = {
adapter: string;
useNavigate: UseNavigate;
useSearchParams: UseSearchParams;
};
declare function createSearchParamsCache<Parsers extends ParserMap>(parsers: Parsers, { urlKeys }?: {
urlKeys?: UrlKeys<Parsers>;
}): {
parse: {
(searchParams: SearchParams): inferParserType<Parsers>;
(searchParams: Promise<any>): Promise<inferParserType<Parsers>>;
};
get: <Key extends keyof Parsers>(key: Key) => inferParserType<Parsers>[Key];
all: () => inferParserType<Parsers>;
};
export { createSearchParamsCache }
export { createSearchParamsCache as createSearchParamsCache_alias_1 }
declare function createSerializer<Parsers extends ParserMap>(parsers: Parsers, { clearOnDefault, urlKeys }?: Pick<Options, 'clearOnDefault'> & {
urlKeys?: UrlKeys<Parsers>;
}): {
(values: Partial<inferParserType<Parsers> extends infer T ? { [K in keyof T]: inferParserType<Parsers>[K] | null; } : never>): string;
(base: Base, values: Partial<inferParserType<Parsers> extends infer T ? { [K in keyof T]: inferParserType<Parsers>[K] | null; } : never> | null): string;
};
export { createSerializer }
export { createSerializer as createSerializer_alias_1 }
export { createSerializer as createSerializer_alias_2 }
export declare type CrossHookSyncPayload = {
state: any;
query: string | null;
};
export declare function debug(message: string, ...args: any[]): void;
export declare const debugEnabled: boolean;
export declare const emitter: Emitter<EventMap>;
/**
* Opt-in to syncing shallow updates of the URL with the useOptimisticSearchParams hook.
*
* By default, the useOptimisticSearchParams hook will only react to internal nuqs updates.
* If third party code updates the History API directly, use this function to
* enable useOptimisticSearchParams to react to those changes.
*/
export declare function enableHistorySync(): void;
export declare function encodeQueryValue(input: string): string;
export declare function enqueueQueryStringUpdate<Value>(key: string, value: Value | null, serialize: (value: Value) => string, options: Pick<Options, 'history' | 'scroll' | 'shallow' | 'startTransition' | 'throttleMs'>): string | null;
export declare function error(code: keyof typeof errors): string;
export declare const errors: {
readonly 303: "Multiple adapter contexts detected. This might happen in monorepos.";
readonly 404: "nuqs requires an adapter to work with your framework.";
readonly 409: "Multiple versions of the library are loaded. This may lead to unexpected behavior. Currently using `%s`, but `%s` (via the %s adapter) was about to load on top.";
readonly 414: "Max safe URL length exceeded. Some browsers may not be able to accept this URL. Consider limiting the amount of state stored in the URL.";
readonly 429: "URL update rate-limited by the browser. Consider increasing `throttleMs` for key(s) `%s`. %O";
readonly 500: "Empty search params cache. Search params can't be accessed in Layouts.";
readonly 501: "Search params cache already populated. Have you called `parse` twice?";
};
declare type EventMap = {
[key: string]: CrossHookSyncPayload;
};
/**
* Next.js pages router merges dynamic URL params with search params in its
* internal state.
* However, we need to pass just the URL params to the href part of the router
* update functions.
* This function finds the dynamic URL params placeholders in the pathname
* (eg: `/path/[foo]/[bar]`) and extracts the corresponding values from the
* query state object, leaving out any other search params.
*/
export declare function extractDynamicUrlParams(pathname: string, values: Record<string, string | string[] | undefined>): Record<string, string | string[] | undefined>;
export declare const FLUSH_RATE_LIMIT_MS: number;
export declare function getAsPathPathname(asPath: string): string;
export declare function getDefaultThrottle(): 50 | 120 | 320;
export declare function getQueuedValue(key: string): string | null | undefined;
export declare function getSearchParams(url: string | URL): URLSearchParams;
declare type HistoryOptions = 'replace' | 'push';
export { HistoryOptions }
export { HistoryOptions as HistoryOptions_alias_1 }
export { HistoryOptions as HistoryOptions_alias_2 }
export declare const historyUpdateMarker = "__nuqs__";
declare type inferParserRecordType<Map extends Record<string, ParserBuilder<any>>> = {
[Key in keyof Map]: inferSingleParserType<Map[Key]>;
} & {};
/**
* Type helper to extract the underlying returned data type of a parser
* or of an object describing multiple parsers and their associated keys.
*
* Usage:
*
* ```ts
* import { type inferParserType } from 'nuqs' // or 'nuqs/server'
*
* const intNullable = parseAsInteger
* const intNonNull = parseAsInteger.withDefault(0)
*
* inferParserType<typeof intNullable> // number | null
* inferParserType<typeof intNonNull> // number
*
* const parsers = {
* a: parseAsInteger,
* b: parseAsBoolean.withDefault(false)
* }
*
* inferParserType<typeof parsers>
* // { a: number | null, b: boolean }
* ```
*/
declare type inferParserType<Input> = Input extends ParserBuilder<any> ? inferSingleParserType<Input> : Input extends Record<string, ParserBuilder<any>> ? inferParserRecordType<Input> : never;
export { inferParserType }
export { inferParserType as inferParserType_alias_1 }
export { inferParserType as inferParserType_alias_2 }
declare type inferSingleParserType<Parser> = Parser extends ParserBuilder<infer Value> & {
defaultValue: infer Value;
} ? Value : Parser extends ParserBuilder<infer Value> ? Value | null : never;
export declare function isPagesRouter(): boolean;
/**
* Test that a parser is bijective (serialize then parse gives back the same value).
*
* It will throw if the parser does not serialize the input to the expected serialized value,
* or if the parser does not parse the serialized value to the expected input value.
* The parser's `eq` function (if provided, otherwise `===`) is used to compare the values.
*
* Usage:
* ```ts
* // Expect it to pass (no error thrown)
* expect(isParserBijective(parseAsInteger, '42', 42)).toBe(true)
* // Expect it to fail
* expect(() => isParserBijective(parseAsInteger, '42', 47)).toThrow()
* ```
*
* @param parser The parser to test
* @param serialized The serialized representation of the input to test against
* @param input An input value to test against
* @returns `true` if the test passes, otherwise it will throw.
*/
export declare function isParserBijective<T>(parser: ParserBuilder<T>, serialized: string, input: T): boolean;
declare type KeyMapValue<Type> = Parser<Type> & Options & {
defaultValue?: Type;
};
declare type LoaderFunction<Parsers extends ParserMap> = ReturnType<typeof createLoader<Parsers>>;
export { LoaderFunction }
export { LoaderFunction as LoaderFunction_alias_1 }
export { LoaderFunction as LoaderFunction_alias_2 }
declare type LoaderInput = URL | Request | URLSearchParams | Record<string, string | string[] | undefined> | string;
export { LoaderInput }
export { LoaderInput as LoaderInput_alias_1 }
export { LoaderInput as LoaderInput_alias_2 }
declare type LoaderOptions<Parsers extends ParserMap> = {
urlKeys?: UrlKeys<Parsers>;
};
export { LoaderOptions }
export { LoaderOptions as LoaderOptions_alias_1 }
export { LoaderOptions as LoaderOptions_alias_2 }
declare type NavigateFn = (url: NavigateUrl, options: NavigateOptions) => void;
declare type NavigateOptions = {
replace?: boolean;
preventScrollReset?: boolean;
state?: unknown;
};
declare type NavigateUrl = {
hash?: string;
search?: string;
};
declare type Nullable<T> = {
[K in keyof T]: T[K] | null;
} & {};
export { Nullable }
export { Nullable as Nullable_alias_1 }
export { Nullable as Nullable_alias_2 }
export declare const NuqsAdapter: ({ children, ...props }: {
children: ReactNode;
}) => FunctionComponentElement<ProviderProps<unstable_AdapterContext_2>>;
declare const NuqsAdapter_2: ({ children, ...props }: {
children: ReactNode;
}) => FunctionComponentElement<ProviderProps<unstable_AdapterContext_3>>;
export { NuqsAdapter_2 as NuqsAdapter_alias_1 }
export { NuqsAdapter_2 as NuqsAdapter_alias_7 }
export declare function NuqsAdapter_alias_2({ children, fullPageNavigationOnShallowFalseUpdates }: {
children: ReactNode;
fullPageNavigationOnShallowFalseUpdates?: boolean;
}): FunctionComponentElement<ProviderProps< {
fullPageNavigationOnShallowFalseUpdates: boolean;
}>>;
export declare const NuqsAdapter_alias_3: ({ children, ...props }: {
children: ReactNode;
}) => FunctionComponentElement<ProviderProps<unstable_AdapterContext_2>>;
export declare const NuqsAdapter_alias_4: ({ children, ...props }: {
children: ReactNode;
}) => FunctionComponentElement<ProviderProps<unstable_AdapterContext_3>>;
export declare const NuqsAdapter_alias_5: ({ children, ...props }: {
children: ReactNode;
}) => FunctionComponentElement<ProviderProps<unstable_AdapterContext_3>>;
export declare const NuqsAdapter_alias_6: ({ children, ...props }: {
children: ReactNode;
}) => FunctionComponentElement<ProviderProps<unstable_AdapterContext_3>>;
export declare const NuqsAdapter_alias_8: ({ children, ...props }: {
children: ReactNode;
}) => FunctionComponentElement<ProviderProps<unstable_AdapterContext_3>>;
export declare function NuqsTestingAdapter({ resetUrlUpdateQueueOnMount, ...props }: TestingAdapterProps): FunctionComponentElement<ProviderProps<unstable_AdapterContext_2>>;
export declare type OnUrlUpdateFunction = (event: UrlUpdateEvent) => void;
declare type Options = {
/**
* How the query update affects page history
*
* `push` will create a new history entry, allowing to use the back/forward
* buttons to navigate state updates.
* `replace` (default) will keep the current history point and only replace
* the query string.
*/
history?: HistoryOptions;
/**
* Scroll to top after a query state update
*
* Defaults to `false`, unlike the Next.js router page navigation methods.
*/
scroll?: boolean;
/**
* Shallow mode (true by default) keeps query states update client-side only,
* meaning there won't be calls to the server.
*
* Setting it to `false` will trigger a network request to the server with
* the updated querystring.
*/
shallow?: boolean;
/**
* Maximum amount of time (ms) to wait between updates of the URL query string.
*
* This is to alleviate rate-limiting of the Web History API in browsers,
* and defaults to 50ms. Safari requires a much higher value of around 340ms.
*
* Note: the value will be limited to a minimum of 50ms, anything lower
* will not have any effect.
*/
throttleMs?: number;
/**
* In RSC frameworks, opt-in to observing Server Component loading states when
* doing non-shallow updates by passing a `startTransition` from the
* `React.useTransition()` hook.
*
* In other frameworks, navigation events triggered by a query update can also
* be wrapped in a transition this way (e.g. `React.startTransition`).
*/
startTransition?: TransitionStartFunction;
/**
* Clear the key-value pair from the URL query string when setting the state
* to the default value.
*
* Defaults to `true` to keep URLs clean.
*
* Set it to `false` to keep backwards-compatiblity when the default value
* changes (prefer explicit URLs whose meaning don't change).
*/
clearOnDefault?: boolean;
};
export { Options }
export { Options as Options_alias_1 }
export { Options as Options_alias_2 }
/**
* A comma-separated list of items.
* Items are URI-encoded for safety, so they may not look nice in the URL.
*
* @param itemParser Parser for each individual item in the array
* @param separator The character to use to separate items (default ',')
*/
declare function parseAsArrayOf<ItemType>(itemParser: Parser<ItemType>, separator?: string): ParserBuilder<ItemType[]>;
export { parseAsArrayOf }
export { parseAsArrayOf as parseAsArrayOf_alias_1 }
export { parseAsArrayOf as parseAsArrayOf_alias_2 }
declare const parseAsBoolean: ParserBuilder<boolean>;
export { parseAsBoolean }
export { parseAsBoolean as parseAsBoolean_alias_1 }
export { parseAsBoolean as parseAsBoolean_alias_2 }
declare const parseAsFloat: ParserBuilder<number>;
export { parseAsFloat }
export { parseAsFloat as parseAsFloat_alias_1 }
export { parseAsFloat as parseAsFloat_alias_2 }
declare const parseAsHex: ParserBuilder<number>;
export { parseAsHex }
export { parseAsHex as parseAsHex_alias_1 }
export { parseAsHex as parseAsHex_alias_2 }
declare const parseAsIndex: ParserBuilder<number>;
export { parseAsIndex }
export { parseAsIndex as parseAsIndex_alias_1 }
export { parseAsIndex as parseAsIndex_alias_2 }
declare const parseAsInteger: ParserBuilder<number>;
export { parseAsInteger }
export { parseAsInteger as parseAsInteger_alias_1 }
export { parseAsInteger as parseAsInteger_alias_2 }
/**
* Querystring encoded as an ISO-8601 string (UTC)
* without the time zone offset, and returned as
* a Date object.
*
* The Date is parsed without the time zone offset,
* making it at 00:00:00 UTC.
*/
declare const parseAsIsoDate: ParserBuilder<Date>;
export { parseAsIsoDate }
export { parseAsIsoDate as parseAsIsoDate_alias_1 }
export { parseAsIsoDate as parseAsIsoDate_alias_2 }
/**
* Querystring encoded as an ISO-8601 string (UTC),
* and returned as a Date object.
*/
declare const parseAsIsoDateTime: ParserBuilder<Date>;
export { parseAsIsoDateTime }
export { parseAsIsoDateTime as parseAsIsoDateTime_alias_1 }
export { parseAsIsoDateTime as parseAsIsoDateTime_alias_2 }
/**
* Encode any object shape into the querystring value as JSON.
* Note: you may want to use `useQueryStates` for finer control over
* multiple related query keys.
*
* @param runtimeParser Runtime parser (eg: Zod schema) to validate after JSON.parse
*/
declare function parseAsJson<T>(runtimeParser: (value: unknown) => T): ParserBuilder<T>;
export { parseAsJson }
export { parseAsJson as parseAsJson_alias_1 }
export { parseAsJson as parseAsJson_alias_2 }
/**
* Number-based literals provide better type-safety for known sets of values.
* You will need to pass the parseAsNumberLiteral function a list of your number values
* in order to validate the query string. Anything else will return `null`,
* or your default value if specified.
*
* Example:
* ```ts
* const diceSides = [1, 2, 3, 4, 5, 6] as const
*
* const [side, setSide] = useQueryState(
* 'side',
* parseAsNumberLiteral(diceSides) // pass a readonly list of allowed values
* .withDefault(4)
* )
* ```
*
* @param validValues The values you want to accept
*/
declare function parseAsNumberLiteral<Literal extends number>(validValues: readonly Literal[]): ParserBuilder<Literal>;
export { parseAsNumberLiteral }
export { parseAsNumberLiteral as parseAsNumberLiteral_alias_1 }
export { parseAsNumberLiteral as parseAsNumberLiteral_alias_2 }
declare const parseAsString: ParserBuilder<string>;
export { parseAsString }
export { parseAsString as parseAsString_alias_1 }
export { parseAsString as parseAsString_alias_2 }
/**
* String-based enums provide better type-safety for known sets of values.
* You will need to pass the parseAsStringEnum function a list of your enum values
* in order to validate the query string. Anything else will return `null`,
* or your default value if specified.
*
* Example:
* ```ts
* enum Direction {
* up = 'UP',
* down = 'DOWN',
* left = 'LEFT',
* right = 'RIGHT'
* }
*
* const [direction, setDirection] = useQueryState(
* 'direction',
* parseAsStringEnum<Direction>(Object.values(Direction)) // pass a list of allowed values
* .withDefault(Direction.up)
* )
* ```
*
* Note: the query string value will be the value of the enum, not its name
* (example above: `direction=UP`).
*
* @param validValues The values you want to accept
*/
declare function parseAsStringEnum<Enum extends string>(validValues: Enum[]): ParserBuilder<Enum>;
export { parseAsStringEnum }
export { parseAsStringEnum as parseAsStringEnum_alias_1 }
export { parseAsStringEnum as parseAsStringEnum_alias_2 }
/**
* String-based literals provide better type-safety for known sets of values.
* You will need to pass the parseAsStringLiteral function a list of your string values
* in order to validate the query string. Anything else will return `null`,
* or your default value if specified.
*
* Example:
* ```ts
* const colors = ["red", "green", "blue"] as const
*
* const [color, setColor] = useQueryState(
* 'color',
* parseAsStringLiteral(colors) // pass a readonly list of allowed values
* .withDefault("red")
* )
* ```
*
* @param validValues The values you want to accept
*/
declare function parseAsStringLiteral<Literal extends string>(validValues: readonly Literal[]): ParserBuilder<Literal>;
export { parseAsStringLiteral }
export { parseAsStringLiteral as parseAsStringLiteral_alias_1 }
export { parseAsStringLiteral as parseAsStringLiteral_alias_2 }
/**
* Querystring encoded as the number of milliseconds since epoch,
* and returned as a Date object.
*/
declare const parseAsTimestamp: ParserBuilder<Date>;
export { parseAsTimestamp }
export { parseAsTimestamp as parseAsTimestamp_alias_1 }
export { parseAsTimestamp as parseAsTimestamp_alias_2 }
declare type Parser<T> = {
/**
* Convert a query string value into a state value.
*
* If the string value does not represent a valid state value,
* the parser should return `null`. Throwing an error is also supported.
*/
parse: (value: string) => T | null;
/**
* Render the state value into a query string value.
*/
serialize?: (value: T) => string;
/**
* Check if two state values are equal.
*
* This is used when using the `clearOnDefault` value, to compare the default
* value with the set value.
*
* It makes sense to provide this function when the state value is an object
* or an array, as the default referential equality check will not work.
*/
eq?: (a: T, b: T) => boolean;
};
export { Parser }
export { Parser as Parser_alias_1 }
export { Parser as Parser_alias_2 }
declare type ParserBuilder<T> = Required<Parser<T>> & Options & {
/**
* Set history type, shallow routing and scroll restoration options
* at the hook declaration level.
*
* Note that you can override those options in individual calls to the
* state updater function.
*/
withOptions<This>(this: This, options: Options): This;
/**
* Specifying a default value makes the hook state non-nullable when the
* query is missing from the URL: the default value is returned instead
* of `null`.
*
* Setting the state to the default value¹ will clear the query string key
* from the URL, unless `clearOnDefault` is set to `false`.
*
* Setting the state to `null` will always clear the query string key
* from the URL, and return the default value.
*
* ¹: Equality is checked with the parser's `eq` function, or referential
* equality if not provided.
*
* @param defaultValue
*/
withDefault(this: ParserBuilder<T>, defaultValue: NonNullable<T>): Omit<ParserBuilder<T>, 'parseServerSide'> & {
readonly defaultValue: NonNullable<T>;
/**
* Use the parser in Server Components
*
* `parse` is intended to be used only by the hook, but you can use this
* method to hydrate query values on server-side rendered pages.
* See the `server-side-parsing` demo for an example.
*
* Note that when multiple queries are presented to the parser
* (eg: `/?a=1&a=2`), only the **first** will be parsed, to mimic the
* behaviour of URLSearchParams:
* https://url.spec.whatwg.org/#dom-urlsearchparams-get
*
* @param value as coming from page props
*/
parseServerSide(value: string | string[] | undefined): NonNullable<T>;
};
/**
* Use the parser in Server Components
*
* `parse` is intended to be used only by the hook, but you can use this
* method to hydrate query values on server-side rendered pages.
* See the `server-side-parsing` demo for an example.
*
* Note that when multiple queries are presented to the parser
* (eg: `/?a=1&a=2`), only the **first** will be parsed, to mimic the
* behaviour of URLSearchParams:
* https://url.spec.whatwg.org/#dom-urlsearchparams-get
*
* @param value as coming from page props
*/
parseServerSide(value: string | string[] | undefined): T | null;
};
export { ParserBuilder }
export { ParserBuilder as ParserBuilder_alias_1 }
export { ParserBuilder as ParserBuilder_alias_2 }
declare type ParserMap = Record<string, ParserWithOptionalDefault<any>>;
export { ParserMap }
export { ParserMap as ParserMap_alias_1 }
export { ParserMap as ParserMap_alias_2 }
declare type ParserWithOptionalDefault<T> = ParserBuilder<T> & {
defaultValue?: T;
};
export { ParserWithOptionalDefault }
export { ParserWithOptionalDefault as ParserWithOptionalDefault_alias_1 }
export { ParserWithOptionalDefault as ParserWithOptionalDefault_alias_2 }
export declare function patchHistory(emitter: SearchParamsSyncEmitter, adapter: string): void;
declare function renderQueryString(search: URLSearchParams): string;
export { renderQueryString }
export { renderQueryString as renderQueryString_alias_1 }
declare type Require<T, Keys extends keyof T> = Pick<Required<T>, Keys> & Omit<T, Keys>;
export declare function resetQueue(): void;
export declare function safeParse<T>(parser: Parser<T>['parse'], value: string, key?: string): T | null;
/**
* Eventually flush the update queue to the URL query string.
*
* This takes care of throttling to avoid hitting browsers limits
* on calls to the history pushState/replaceState APIs, and defers
* the call so that individual query state updates can be batched
* when running in the same event loop tick.
*
* @returns a Promise to the URLSearchParams that have been applied.
*/
export declare function scheduleFlushToURL({ getSearchParamsSnapshot, updateUrl, rateLimitFactor }: Pick<AdapterInterface, 'updateUrl' | 'getSearchParamsSnapshot' | 'rateLimitFactor'>): Promise<URLSearchParams>;
declare type SearchParams = Record<string, string | string[] | undefined>;
export { SearchParams }
export { SearchParams as SearchParams_alias_1 }
export { SearchParams as SearchParams_alias_2 }
export declare type SearchParamsSyncEmitter = Emitter<{
update: URLSearchParams;
}>;
declare type SetValues<T extends UseQueryStatesKeysMap> = (values: Partial<Nullable<Values<T>>> | UpdaterFn<T> | null, options?: Options) => Promise<URLSearchParams>;
export { SetValues }
export { SetValues as SetValues_alias_1 }
export declare function sprintf(base: string, ...args: any[]): string;
declare type TestingAdapterProps = {
searchParams?: string | Record<string, string> | URLSearchParams;
onUrlUpdate?: OnUrlUpdateFunction;
rateLimitFactor?: number;
resetUrlUpdateQueueOnMount?: boolean;
children: ReactNode;
};
/**
* Tests that a parser is bijective (parse then serialize gives back the same query string).
*
* It will throw if the parser is not bijective (if the serialized value is not equal to the input query).
*
* Usage:
* ```ts
* // Expect it to pass (no error thrown)
* expect(testParseThenSerialize(myParser, 'foo')).toBe(true)
* // Expect it to fail
* expect(() => testParseThenSerialize(myParser, 'bar')).toThrow()
* ```
*
* @param parser The parser to test
* @param input A query string to test against
* @returns `true` if the test passes, otherwise it will throw.
*/
export declare function testParseThenSerialize<T>(parser: ParserBuilder<T>, input: string): boolean;
/**
* Test that a parser is bijective (serialize then parse gives back the same value).
*
* It will throw if the parser is not bijective (if the parsed value is not equal to the input value).
* The parser's `eq` function is used to compare the values.
*
* Usage:
* ```ts
* // Expect it to pass (no error thrown)
* expect(testSerializeThenParse(myParser, 'foo')).toBe(true)
* // Expect it to fail
* expect(() => testSerializeThenParse(myParser, 'bar')).toThrow()
* ```
*
* @param parser The parser to test
* @param input An input value to test against
* @returns `true` if the test passes, otherwise it will throw.
*/
export declare function testSerializeThenParse<T>(parser: ParserBuilder<T>, input: T): boolean;
declare type UpdaterFn<T extends UseQueryStatesKeysMap> = (old: Values<T>) => Partial<Nullable<Values<T>>> | null;
declare type UpdateUrlFunction = (search: URLSearchParams, options: Required<AdapterOptions>) => void;
export { UpdateUrlFunction }
export { UpdateUrlFunction as unstable_UpdateUrlFunction }
export declare const URL_MAX_LENGTH = 2000;
/**
* Helper type to define and reuse urlKey options to rename search params keys
*
* Usage:
* ```ts
* import { type UrlKeys } from 'nuqs' // or 'nuqs/server'
*
* export const coordinatesSearchParams = {
* latitude: parseAsFloat.withDefault(0),
* longitude: parseAsFloat.withDefault(0),
* }
* export const coordinatesUrlKeys: UrlKeys<typeof coordinatesSearchParams> = {
* latitude: 'lat',
* longitude: 'lng',
* }
*
* // Later in the code:
* useQueryStates(coordinatesSearchParams, {
* urlKeys: coordinatesUrlKeys
* })
* createSerializer(coordinatesSearchParams, {
* urlKeys: coordinatesUrlKeys
* })
* createSearchParamsCache(coordinatesSearchParams, {
* urlKeys: coordinatesUrlKeys
* })
* ```
*/
declare type UrlKeys<Parsers extends Record<string, any>> = Partial<Record<keyof Parsers, string>>;
export { UrlKeys }
export { UrlKeys as UrlKeys_alias_1 }
export { UrlKeys as UrlKeys_alias_2 }
export declare function urlSearchParamsToObject(search: URLSearchParams): Record<string, string | string[]>;
export declare type UrlUpdateEvent = {
searchParams: URLSearchParams;
queryString: string;
options: Required<AdapterOptions>;
};
export declare function useAdapter(): AdapterInterface_2;
declare type UseAdapterHook = () => AdapterInterface;
export { UseAdapterHook }
export { UseAdapterHook as unstable_UseAdapterHook }
declare type UseNavigate = () => NavigateFn;
export declare function useNuqsNextAppRouterAdapter(): AdapterInterface;
export declare function useNuqsNextPagesRouterAdapter(): AdapterInterface;
declare const useOptimisticSearchParams: () => URLSearchParams;
export { useOptimisticSearchParams }
export { useOptimisticSearchParams as useOptimisticSearchParams_alias_2 }
export declare const useOptimisticSearchParams_alias_1: () => URLSearchParams;
export declare const useOptimisticSearchParams_alias_3: () => URLSearchParams;
/**
* React state hook synchronized with a URL query string in Next.js
*
* This variant is used when providing a default value. This will make
* the returned state non-nullable when the query is not present in the URL.
* (the default value will be returned instead).
*
* _Note: the URL will **not** be updated with the default value if the query
* is missing._
*
* Setting the value to `null` will clear the query in the URL, and return
* the default value as state.
*
* Example usage:
* ```ts
* const [count, setCount] = useQueryState(
* 'count',
* parseAsInteger.defaultValue(0)
* )
*
* const increment = () => setCount(oldCount => oldCount + 1)
* const decrement = () => setCount(oldCount => oldCount - 1)
* // Clears the query key from the URL and `count` equals 0
* const clearCountQuery = () => setCount(null)
* ```
* @param key The URL query string key to bind to
* @param options - Parser (defines the state data type), default value and optional history mode.
*/
declare function useQueryState<T>(key: string, options: UseQueryStateOptions<T> & {
defaultValue: T;
}): UseQueryStateReturn<NonNullable<ReturnType<typeof options.parse>>, typeof options.defaultValue>;
/**
* React state hook synchronized with a URL query string in Next.js
*
* If the query is missing in the URL, the state will be `null`.
*
* Example usage:
* ```ts
* // Blog posts filtering by tag
* const [tag, selectTag] = useQueryState('tag')
* const filteredPosts = posts.filter(post => tag ? post.tag === tag : true)
* const clearTag = () => selectTag(null)
* ```
* @param key The URL query string key to bind to
* @param options - Parser (defines the state data type), and optional history mode.
*/
declare function useQueryState<T>(key: string, options: UseQueryStateOptions<T>): UseQueryStateReturn<NonNullable<ReturnType<typeof options.parse>>, undefined>;
/**
* Default type string, limited options & default value
*/
declare function useQueryState(key: string, options: Options & {
defaultValue: string;
}): UseQueryStateReturn<string, typeof options.defaultValue>;
/**
* React state hook synchronized with a URL query string in Next.js
*
* If the query is missing in the URL, the state will be `null`.
*
* Note: by default the state type is a `string`. To use different types,
* check out the `parseAsXYZ` helpers:
* ```ts
* const [date, setDate] = useQueryState(
* 'date',
* parseAsIsoDateTime.withDefault(new Date('2021-01-01'))
* )
*
* const setToNow = () => setDate(new Date())
* const addOneHour = () => {
* setDate(oldDate => new Date(oldDate.valueOf() + 3600_000))
* }
* ```
* @param key The URL query string key to bind to
* @param options - Parser (defines the state data type), and optional history mode.
*/
declare function useQueryState(key: string, options: Pick<UseQueryStateOptions<string>, keyof Options>): UseQueryStateReturn<string, undefined>;
/**
* React state hook synchronized with a URL query string in Next.js
*
* If the query is missing in the URL, the state will be `null`.
*
* Note: by default the state type is a `string`. To use different types,
* check out the `parseAsXYZ` helpers:
* ```ts
* const [date, setDate] = useQueryState(
* 'date',
* parseAsIsoDateTime.withDefault(new Date('2021-01-01'))
* )
*
* const setToNow = () => setDate(new Date())
* const addOneHour = () => {
* setDate(oldDate => new Date(oldDate.valueOf() + 3600_000))
* }
* ```
* @param key The URL query string key to bind to
*/
declare function useQueryState(key: string): UseQueryStateReturn<string, undefined>;
export { useQueryState }
export { useQueryState as useQueryState_alias_1 }
declare interface UseQueryStateOptions<T> extends Parser<T>, Options {
}
export { UseQueryStateOptions }
export { UseQueryStateOptions as UseQueryStateOptions_alias_1 }
declare type UseQueryStateReturn<Parsed, Default> = [
Default extends undefined ? Parsed | null : Parsed,
(value: null | Parsed | ((old: Default extends Parsed ? Parsed : Parsed | null) => Parsed | null), options?: Options) => Promise<URLSearchParams>
];
export { UseQueryStateReturn }
export { UseQueryStateReturn as UseQueryStateReturn_alias_1 }
/**
* Synchronise multiple query string arguments to React state in Next.js
*
* @param keys - An object describing the keys to synchronise and how to
* serialise and parse them.
* Use `parseAs(String|Integer|Float|...)` for quick shorthands.
* @param options - Optional history mode, shallow routing and scroll restoration options.
*/
declare function useQueryStates<KeyMap extends UseQueryStatesKeysMap>(keyMap: KeyMap, { history, scroll, shallow, throttleMs, clearOnDefault, startTransition, urlKeys }?: Partial<UseQueryStatesOptions<KeyMap>>): UseQueryStatesReturn<KeyMap>;
export { useQueryStates }
export { useQueryStates as useQueryStates_alias_1 }
declare type UseQueryStatesKeysMap<Map = any> = {
[Key in keyof Map]: KeyMapValue<Map[Key]>;
} & {};
export { UseQueryStatesKeysMap }
export { UseQueryStatesKeysMap as UseQueryStatesKeysMap_alias_1 }
declare type UseQueryStatesOptions<KeyMap extends UseQueryStatesKeysMap> = Options & {
urlKeys: UrlKeys<KeyMap>;
};
export { UseQueryStatesOptions }
export { UseQueryStatesOptions as UseQueryStatesOptions_alias_1 }
declare type UseQueryStatesReturn<T extends UseQueryStatesKeysMap> = [
Values<T>,
SetValues<T>
];
export { UseQueryStatesReturn }
export { UseQueryStatesReturn as UseQueryStatesReturn_alias_1 }
declare type UseSearchParams = (initial: URLSearchParams) => [URLSearchParams, {}];
declare type Values<T extends UseQueryStatesKeysMap> = {
[K in keyof T]: T[K]['defaultValue'] extends NonNullable<ReturnType<T[K]['parse']>> ? NonNullable<ReturnType<T[K]['parse']>> : ReturnType<T[K]['parse']> | null;
};
export { Values }
export { Values as Values_alias_1 }
export declare function warn(message: string, ...args: any[]): void;
export declare function warnIfURLIsTooLong(queryString: string): void;
/**
* A higher order component that wraps the children with the NuqsTestingAdapter
*
* It allows creating wrappers for testing purposes by providing only the
* necessary props to the NuqsTestingAdapter.
*
* Usage:
* ```tsx
* render(<MyComponent />, {
* wrapper: withNuqsTestingAdapter({ searchParams: '?foo=bar' })
* })
* ```
*/
export declare function withNuqsTestingAdapter(props?: Omit<TestingAdapterProps, 'children'>): ({ children }: {
children: ReactNode;
}) => DetailedReactHTMLElement<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
export { }