State In Url
Store any user state in query parameters; imagine JSON in a browser URL, while keeping types and structure of data, e.g.numbers will be decoded as numbers not strings. With TS validation. Shared state and URL state sync without any hassle or boilerplate. Supports Next.js@14-16, react-router@6-7, ...
Overview
The state-in-url library allows users to store any user state in query parameters, enabling JSON within browser URLs while maintaining data types and structure. It simplifies URL synchronization, offers Typescript validation, and untangles the process of query string-based state management.
Features
- Simple: No providers, reducers, or boilerplate; API similar to React.useState.
- Typescript validation/autocomplete: Static validation in IDE/tests based on Typescript definition.
- Complex data: Supports nested objects, dates, and arrays in URLs.
- Default values: Provides default values if parameters are absent in the URL.
- Organized: All possible values are defined at the start, protecting from non-existent keys.
- Compatible: Retains 3rd party query parameters as is.
- Flexible: Supports multiple state objects on the same page using different keys.
- Fast: Minimal rerenders; around 1ms to encode and decode large objects.
Summary
The state-in-url library simplifies state management through query parameters, offering Typescript validation, URL synchronization, and support for complex data structures. With features like default values, organized state management, and compatibility with multiple frameworks, it streamlines the process of handling and syncing application state through URLs.