+Seamlessly sync React state with URL query parameters in Next.js/React.js applications. Simplify state management, enhance shareability, and maintain type safety—all through your browser's URL.
+
+
+
+
+[](https://www.linkedin.com/in/asmyshlyaev177/)
+
+
+[](https://www.npmjs.com/package/state-in-url)
+[](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml)
+[](https://github.com/asmyshlyaev177/state-in-url/)
+
+
+
+
+# Features
+- **Seamless state synchronization with URL query parameters.**
+- **Preserves shape and types of data**
+- **Full TypeScript support for enhanced developer experience.**
+- **Automatic serialization and deserialization of complex objects.**
+- **Separate hooks for Next.js (useUrlState) and React.js (useUrlEncode) usage.**
+- **Efficient updates with minimal re-renders.**
+- **Lightweight, no dependencies.**
+
+## Table of content
+- [Installation](#installation)
+- [Usage with Next.js](#useurlstate-hook-for-nextjs)
+- [Usage with React.js](#useurlencode-hook-for-reactjs)
+- [Low-level encode/decode functions](#encode-and-decode-helpers)
+- [Gothas](#gothas)
+- [Contact & Support](#contact--support)
+- [Changelog](#changelog)
+- [License](#license)
+
+## installation
+```sh
+# npm
+npm install --save prism-react-renderer
+# yarn
+yarn add prism-react-renderer
+# pnpm
+pnpm add prism-react-renderer
+```
-[](https://www.npmjs.com/package/urlstate)
-
-
-When working with Next.js client components sometimes you need to pass values between them, using `useSearchParams` is a good solution, but this library can help you to serialize complex objects and will preserve types. It is more convinient and types-safe solution for state management.
-
-## useUrlState hook
+## useUrlState hook for Next.js
`useUrlState` is a custom React hook for Next.js applications that manages state in the URL query string. It allows you to store and retrieve state from the URL search parameters, providing a way to persist state across page reloads and share application state via URLs.
@@ -23,7 +61,7 @@ When working with Next.js client components sometimes you need to pass values be
```typescript
'use client'
-import { useUrlState } from 'urlstate';
+import { useUrlState } from 'state-in-url';
// State shape should be stored in a constant, don't pass an object directly
const countState = { count: 0 };
@@ -37,6 +75,7 @@ function MyComponent() {
return (
Count: {state.count}
+
@@ -56,7 +95,7 @@ function MyComponent() {
```typescript
'use client'
-import { useUrlState } from 'urlstate';
+import { useUrlState } from 'state-in-url';
interface UserSettings {
theme: 'light' | 'dark';
@@ -109,7 +148,7 @@ function Component() {
```typescript
'use client'
-import { useUrlState } from 'urlstate';
+import { useUrlState } from 'state-in-url';
const someObj = {};
@@ -118,14 +157,14 @@ function SettingsComponent() {
}
```
-## useUrlEncode hook
+## useUrlEncode hook for React.js
`useUrlEncode` is a custom React hook that provides utility functions for encoding and decoding state to and from URL search parameters. This hook doesn't depend on Nextjs, and will works with any React application.
-Accepts optional defaultState argument.
+Accepts optional `defaultState` argument.
```typescript
-import { useUrlEncode } from 'urlstate';
+import { useUrlEncode } from 'state-in-url';
const Component = () => {
const { parse, stringify } = useUrlEncode();
@@ -152,9 +191,9 @@ const Component = () => {
There low level helpers to stringify and parse query string params. Useful for other frameworks or pure JS.
```javascript
-import { encode, decode } from 'urlstate';
+import { encode, decode } from 'state-in-url';
-const state = encode({ obj: [1, 2, 3] });
+const state = { obj: [1, 2, 3], obj2: true }
// to params
const params = new URLSearchParams();
@@ -176,5 +215,12 @@ const obj = Object.fromEntries(
1. Can pass only serializable values, `Function`, `BigInt` or `Symbol` won't work, probably things like `ArrayBuffer` neither. But won't throw an error if you do it accidently.
2. Developed and tested with recent `Next.js` and `Typescript` versions.
+## Contact & Support
+
+- Create a [GitHub issue](https://github.com/asmyshlyaev177/state-in-url/issues) for bug reports, feature requests, or questions
+- Add a ⭐️ [star on GitHub](https://github.com/asmyshlyaev177/state-in-url) to support the project!
+
+## [Changelog](https://github.com/asmyshlyaev177/state-in-url/blob/main/CHANGELOG.md)
-## [Changelog](https://github.com/asmyshlyaev177/urlstate/blob/main/CHANGELOG.md)
+## License
+This project is licensed under the [MIT license](https://github.com/asmyshlyaev177/state-in-url/blob/main/LICENSE).
diff --git a/assets/hireBadge.svg b/assets/hireBadge.svg
new file mode 100644
index 0000000..cc3fc5f
--- /dev/null
+++ b/assets/hireBadge.svg
@@ -0,0 +1 @@
+
+ 