https://github.com/bring-shrubbery/sp-hooks
Use search params as a state in your web application.
https://github.com/bring-shrubbery/sp-hooks
rsc search-params typescript use-state usestate
Last synced: 3 months ago
JSON representation
Use search params as a state in your web application.
- Host: GitHub
- URL: https://github.com/bring-shrubbery/sp-hooks
- Owner: bring-shrubbery
- License: apache-2.0
- Created: 2023-08-02T14:55:34.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-23T10:46:35.000Z (about 1 year ago)
- Last Synced: 2025-01-24T19:44:42.457Z (4 months ago)
- Topics: rsc, search-params, typescript, use-state, usestate
- Language: TypeScript
- Homepage: https://sp-hooks.vercel.app
- Size: 1.75 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# Search Params Hooks
[](https://github.com/bring-shrubbery/sp-hooks/actions/workflows/ci.yml)
## Features
- 😌 Sync state to the URL Search Params and back again.
- 💪 Use your own state manager.
- 🤓 Keeps URL clean by automatically removing default values.
- 😳 React Server Components ready.
- 🚀 Next.js integration.
- 🤯 Full TypeScript support.
- 😇 Integrations for SvelteKit/Solid.js coming soon.
- ⚡️ Accepts Zod schema for validation and parsing (WIP).
## Packages
| Package | Latest Version |
| ----------------- | -------------------------------------------------------------- |
| `@sp-hooks/react` |  |
| `@sp-hooks/next` |  |
## Getting Started
### Step 1 ⭐️
Before we start, don't forget to star this repo and follow [@bring-shrubbery](https://github.com/bring-shrubbery), thanks!
### Next.js
`pnpm add @sp-hooks/next`
### React.js
`pnpm add @sp-hooks/react`
## Examples
### Simple Next.js usage
Following example will render a button, which when clicked will toggle the button text between "hello" and "world". It will also update the search params to include the value, which means that after refreshing the page, the state will be preserved.
```tsx
import { useState } from "react";
import { useObserveAndStore } from "@sp-hooks/next";
const Component = () => {
const [darkMode, setDarkMode] = useState(false);
useObserveAndStore({ darkMode });
return (
setDarkMode(!darkMode)}>
{darkMode ? "🌚" : "☀️"}
);
};
```
## Roadmap
- [x] Store React state in URL Search Params.
- [x] Next.js integration.
- [ ] Default values (remove default values from URL).
- [ ] Remove falsy values.
- [ ] Preserve initial keys - keys are preserved in search params, if they were initially set.
- [ ] Array values.
- [ ] Zod validation.
- [ ] Coercing into typed values.
- [ ] Zod default values.
- [ ] Zod optional values.
- [ ] Type-safe state from default values or when validation schema is provided.
- [ ] More validation tools (yup, etc.).
- [ ] Svelte/SvelteKit
- [ ] Solid
## Credits
This project is built and maintained by [Antoni](https://github.com/bring-shrubbery)
If you need help building anything that has a frontend, check out [Quassum](https://quassum.com)
## License
[Apache 2.0 License](./LICENSE)