{"id":22688222,"url":"https://github.com/emanuelefavero/react-url-state-management","last_synced_at":"2026-04-11T11:02:00.935Z","repository":{"id":195877614,"uuid":"693865096","full_name":"emanuelefavero/react-url-state-management","owner":"emanuelefavero","description":"This is a simple react app that shows how to use the browser URL to manage state","archived":false,"fork":false,"pushed_at":"2023-09-21T09:08:23.000Z","size":56,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-04T16:50:29.464Z","etag":null,"topics":["nextjs","react","state-management","url","url-parameters","usesearchparams"],"latest_commit_sha":null,"homepage":"https://react-url-state-management.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emanuelefavero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-19T21:45:33.000Z","updated_at":"2023-09-21T09:03:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"8585638e-2422-4bbc-9ff6-23a955b9d91d","html_url":"https://github.com/emanuelefavero/react-url-state-management","commit_stats":null,"previous_names":["emanuelefavero/react-url-state-management"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Freact-url-state-management","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Freact-url-state-management/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Freact-url-state-management/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Freact-url-state-management/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emanuelefavero","download_url":"https://codeload.github.com/emanuelefavero/react-url-state-management/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246207509,"owners_count":20740723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","react","state-management","url","url-parameters","usesearchparams"],"created_at":"2024-12-10T00:13:32.993Z","updated_at":"2026-04-11T11:01:55.910Z","avatar_url":"https://github.com/emanuelefavero.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React URL State Management\n\nThis is a simple react app that shows how to use the browser URL to manage state.\n\n\u003e Note: The react app is built with Next.js App Router, the same approach can be used with React Router.\n\n## Demo\n\n- [Live Demo](https://react-url-state-management.vercel.app)\n\n#### Screenshot\n\n\u003cimg src=\"screenshot.png\" alt=\"screenshot\" width=\"300\"\u003e\n\n## How to run\n\n- Clone the repo, then run the following commands in the root directory\n\n```bash\nnpm i\nnpm run dev\n```\n\n- open `http://localhost:3000` in your browser\n\n## How it works\n\nThe app allows you to open two routes:\n\n- `/products` - Filter a list of products using URL search parameter\n- `/products-2` - Filter a list of products using useState hook\n\n\u003e Both approaches have the same functionality, but the first one uses the URL to manage the state, while the second one uses the useState hook\n\n## Resources\n\n- [Next.js App Router](https://nextjs.org/docs/getting-started/installation)\n- [Next.js useSearchParams](https://nextjs.org/docs/app/api-reference/functions/use-search-params)\n- [React Router](https://reactrouter.com/en/main)\n\n## License\n\n- [MIT](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femanuelefavero%2Freact-url-state-management","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femanuelefavero%2Freact-url-state-management","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femanuelefavero%2Freact-url-state-management/lists"}