tanstack-search-state
Version: 
A utility for managing search params state with TanStack Router in a type-safe way
40 lines (37 loc) • 1.18 kB
text/typescript
type BaseState<T> = {
    [K in keyof T]: T[K];
};
type SetStateAction<T> = T | ((prevState: T) => T);
type SearchState<T> = BaseState<T> & {
    set: (update: SetStateAction<T>) => Promise<void>;
};
/**
 * Creates a hook for managing search params state with TanStack Router
 * @param initialState - The initial state of the search params
 * @returns A hook that provides access to the search state and a setter function
 * @example
 * ```tsx
 * const useSearchState = createSearch({ page: 1, query: "" });
 *
 * function Component() {
 *   const { page, query, set } = useSearchState();
 *
 *   return (
 *     <div>
 *       <input
 *         value={query}
 *         onChange={(e) => set({ query: e.target.value })}
 *       />
 *       <button onClick={() => set({ page: page + 1 })}>
 *         Next Page
 *       </button>
 *       <button onClick={() => set({ query: undefined })}>
 *         Clear Search
 *       </button>
 *     </div>
 *   );
 * }
 * ```
 */
declare function createSearch<State extends Record<string, any>>(initialState: BaseState<State>): () => SearchState<State>;
export { type BaseState, type SearchState, type SetStateAction, createSearch };