💠
nuqs logo

nuqs

component
utility

This library provides a hook for managing state in Next.js applications using the URL query string, similar to the useState hook in React. It allows developers to easily sync component state with the URL, enabling state preservation during navigation and refreshing.### FeaturesThe library includes robust support for both the app and pages routers of Next.js, ensuring that it works seamlessly across various routing setups. It features a simple API that is familiar to React developers, allowing for quick adoption.### Key Features Include:- Type-safe end-to-end type safety between server and client components.- Universal support for both app and pages routers.- A familiar React.useState-like API that synchronizes with the URL.- Built-in parsers for common state types, like integers, floats, booleans, etc.- History control options that allow for replacement or appending to the browser history.- Designed for client-first updates with options to notify the server for re-calibrating rendered components.- A dedicated hook, `useQueryStates`, for managing multiple related query state variables simultaneously.- Tiny and lightweight, only 4.39 kB gzipped.- Comprehensive testing against every Next.js release.- Customizable parsers and serializers to suit developer requirements.

Features

  • Type-safe
  • End-to-end type safety between server and client components
  • Universal support for both app and pages routers
  • Simple API similar to React.useState
  • Built-in parsers for common types
  • History controls for state management
  • Client-first shallow updates
  • Server cache for type-safe access in nested React Server Components
  • Support for useTransition to get loading states
  • Customizable parsers and serializers
  • Lightweight with minimal bundle size
  • Tested against all Next.js releases

Stats

GitHub Stars4.6K

NPM Downloads209.8K/week

Details

Latest Version2.1.1

Created at5/11/2020

Updated at11/11/2024

LicenseMIT License

Related Items

Get a monthly E-Mail with the newest developments in UI!