nuqs

nuqs is a type-safe search params state management library for React. It provides a useState-like API that synchronizes with the URL query string, offering a seamless way to manage application state directly within the URL.

Key Features:

• Type Safety: Ensures end-to-end type safety between server and client components, reducing runtime errors.
• Universal Compatibility: Works with Next.js (both app and pages routers), React SPAs, Remix, React Router, and more.
• Simple API: Offers a familiar useState-like API, making it easy to integrate into existing React projects.
• Batteries Included: Provides built-in parsers and serializers for common state types, simplifying data handling.
• History Controls: Allows for replacing or appending to navigation history, enabling the use of the browser's back button for state navigation.
• Related Queries: Includes a useQueryStates hook for managing multiple query parameters simultaneously.
• Client-First Approach: Defaults to shallow updates, with an option to notify the server for re-rendering RSCs.
• Server Cache: Enables type-safe access to search parameters in nested React Server Components without prop drilling.
• Transition Support: Integrates with useTransition to provide loading states during server updates.
• Customizable: Allows for creating custom parsers and serializers to handle specific data types.
• Tiny Footprint: Has a small gzipped size of only 4.16 kB.
• Tested and Testable: Rigorously tested against every Next.js release and includes a test adapter for isolated component testing.

Use Cases:

• Filtering and Sorting: Managing complex filtering and sorting options in lists and tables.
• Pagination: Implementing pagination controls that are reflected in the URL.
• Form State: Storing form data in the URL, allowing for shareable links and bookmarking.
• UI State: Persisting UI states, such as open/closed modals or selected tabs, in the URL.
• Complex Application State: Managing intricate application states that need to be synchronized with the URL for better user experience and shareability.