diff --git a/docs/guide/custom-search-param-serialization.md b/docs/guide/custom-search-param-serialization.md index 94bc415f718..d77cf9a7716 100644 --- a/docs/guide/custom-search-param-serialization.md +++ b/docs/guide/custom-search-param-serialization.md @@ -6,9 +6,36 @@ title: Custom Search Param Serialization By default, TanStack Router parses and serializes your search params automatically. Depending on your needs though, you may want to customize the serialization process. -To do so, you can [use `Router`'s `parseSearch` and `stringifySearch` options combined with the `parseSearchWith` and `stringifySearchWith` utilities](../docs/api#search-param-parsing-and-serialization). +To do so, [use `Router`'s `parseSearch` and `stringifySearch` options](../docs/api#search-param-parsing-and-serialization): -For example: We can reimplement the default parser/serializer with the following code: +```tsx + import { + Router, + parseSearchWith, + stringifySearchWith, + } from '@tanstack/react-router'; + import qs from 'query-string'; + + // For example, we use `query-string` to render arrays in bracket notation: + // output: ?key[]=value1&key[]=value2 + + function customStringifier(searchObj) { + return qs.stringify(searchString, { arrayFormat: 'bracket' }); + } + + function customParser(searchString) { + return qs.parse(searchString, { arrayFormat: 'bracket' }); + } + + const router = new Router({ + stringifySearch: customStringifier, + parseSearch: customParser, + }) +``` + +Additionally, you can [use the `parseSearchWith` and `stringifySearchWith` utilities](../docs/api#search-param-parsing-and-serialization) to parse and serialize the search values specifically. + +For example, we can reimplement the default parser/serializer with the following code: ```tsx import {