{"id":13726011,"url":"https://github.com/solkimicreb/react-easy-params","last_synced_at":"2025-04-15T06:14:49.995Z","repository":{"id":57156990,"uuid":"102147470","full_name":"solkimicreb/react-easy-params","owner":"solkimicreb","description":":link: Auto synchronize your state with the URL and LocalStorage.","archived":false,"fork":false,"pushed_at":"2018-10-30T01:15:37.000Z","size":4212,"stargazers_count":74,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-15T06:14:43.804Z","etag":null,"topics":["es6-proxies","front-end","javascript","localstorage","react","reactive","routing","state","url"],"latest_commit_sha":null,"homepage":"","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/solkimicreb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-01T19:43:33.000Z","updated_at":"2024-02-08T19:56:49.000Z","dependencies_parsed_at":"2022-09-03T18:51:18.502Z","dependency_job_id":null,"html_url":"https://github.com/solkimicreb/react-easy-params","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solkimicreb%2Freact-easy-params","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solkimicreb%2Freact-easy-params/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solkimicreb%2Freact-easy-params/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solkimicreb%2Freact-easy-params/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solkimicreb","download_url":"https://codeload.github.com/solkimicreb/react-easy-params/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016641,"owners_count":21198833,"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":["es6-proxies","front-end","javascript","localstorage","react","reactive","routing","state","url"],"created_at":"2024-08-03T01:02:47.224Z","updated_at":"2025-04-15T06:14:49.967Z","avatar_url":"https://github.com/solkimicreb.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Easy Params\n\n:link: Auto synchronize your state with the URL and the LocalStorage.\n\n[![Build](https://img.shields.io/circleci/project/github/solkimicreb/react-easy-params/master.svg)](https://circleci.com/gh/solkimicreb/react-easy-params/tree/master) [![Coverage Status](https://coveralls.io/repos/github/solkimicreb/react-easy-params/badge.svg)](https://coveralls.io/github/solkimicreb/react-easy-params) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Package size](http://img.badgesize.io/https://unpkg.com/react-easy-params/dist/umd.es6.min.js?compression=gzip\u0026label=minzip_size)](https://unpkg.com/react-easy-params/dist/umd.es6.js)  [![Version](https://img.shields.io/npm/v/react-easy-params.svg)](https://www.npmjs.com/package/react-easy-params) [![dependencies Status](https://david-dm.org/solkimicreb/react-easy-params/status.svg)](https://david-dm.org/solkimicreb/react-easy-params) [![License](https://img.shields.io/npm/l/react-easy-params.svg)](https://www.npmjs.com/package/react-easy-params)\n\n\u003ca href=\"#platform-support\"\u003e\u003cimg src=\"images/browser_support.png\" alt=\"Browser support\" width=\"350px\" /\u003e\u003c/a\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTable of Contents\u003c/strong\u003e\u003c/summary\u003e\n\u003c!-- Do not edit the Table of Contents, instead regenerate with `npm run build-toc` --\u003e\n\n\u003c!-- toc --\u003e\n\n* [Introduction](#introduction)\n* [Installation](#installation)\n* [API](#api)\n  + [params](#params)\n  + [setParams(object)](#setparamsobject)\n  + [storage](#storage)\n  + [setStorage(object)](#setstorageobject)\n  + [path](#path)\n  + [setPath(array)](#setpatharray)\n* [Examples with live demos](#examples-with-live-demos)\n* [Relation with React Easy State](#relation-with-react-easy-state)\n* [Platform support](#platform-support)\n* [Alternative builds](#alternative-builds)\n* [Contributing](#contributing)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n## Introduction\n\nEasy Params is a tool for **small apps - without client-side routing**. It exposes two objects and an array, which synchronize with the corresponding browser APIs on mutations.\n\n- The `params` object is reflected in the URL query parameters.\n- The `path` array is reflected in the URL pathname.\n- The `storage` object is persisted in the localStorage.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/param_sync.gif\" alt=\"Synchronization Demo\" width=\"500px\" /\u003e\n\u003c/div\u003e\n\n```js\nimport React from 'react'\nimport { view } from 'react-easy-state'\nimport { params, path } from 'react-easy-params'\n\nconst updatePath = ev =\u003e path[0] = ev.target.value\nconst updateParam = ev =\u003e params.name = ev.target.value\n\nexport default view(() =\u003e\n  \u003cdiv\u003e\n    \u003cdiv\u003ePath: \u003cinput onChange={updatePath} value={path[0]} /\u003e\u003c/div\u003e\n    \u003cdiv\u003eParam: \u003cinput onChange={updateParam} value={params.name} /\u003e\u003c/div\u003e\n  \u003c/div\u003e\n)\n```\n\nUse it together with [React Easy State](https://github.com/solkimicreb/react-easy-state) for an awesome developer experience.\n\n## Installation\n\n`npm install react-easy-params`\n\n## API\n\n### params\n\nThe `params` object is reflected in the URL query parameters. You should store primitive values - which define the current state - in it. Storing primitive user inputs in the URL query makes you page shareable and reloadable.\n\nThe synchronization is one directional. The URL always synchronizes with the `params` object, but the `params` object won't synchronize with the URL on browser history events. It will synchronize once - at page load - though.\n\n### setParams(object)\n\nReplaces the current `params` with the passed object. You should generally mutate `params` directly instead.\n\n### storage\n\nThe `storage` object is persisted in the localStorage. You should store session related information - like the current API token or preferred site theme - in it.\n\nThe synchronization is one directional. The localStorage synchronizes with the `storage` object, but the `storage` object won't synchronize with the localStorage on manual manipulation with `localStorage.setItem()`. It will synchronize once - at page load - though.\n\n### setStorage(object)\n\nReplaces the current `storage` with the passed object. You should generally mutate `storage` directly instead.\n\n### path\n\nThe `path` array is reflected in the URL pathname. It is provided for the sake of completeness, you should usually use the `params` object instead.\n\nThe synchronization is one directional. The URL always synchronizes with the `path` array, but the `path` array won't synchronize with the URL on browser history events. It will synchronize once - at page load - though.\n\n### setPath(array)\n\nReplaces the current `path` with the passed array. You should generally mutate `path` directly instead.\n\n## Examples with live demos\n\n*Beginner*\n\n- [Feature Demo](https://solkimicreb.github.io/react-easy-params/examples/feature-demo/build) ([source](/examples/feature-demo/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-params/tree/master/examples/feature-demo)): a dummy project, which demonstrates the URL synchronization of `params` and `path`.\n\n*Advanced*\n\n- [TodoMVC](https://solkimicreb.github.io/react-easy-params/examples/todo-mvc/build) ([source](/examples/todo-mvc/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-params/tree/master/examples/todo-mvc)): a classic TodoMVC implementation, which persists the todos in localStorage and reflects the current filter in the URL query.\n- [Beer Finder](https://solkimicreb.github.io/react-easy-params/examples/beer-finder/build) ([source](/examples/beer-finder/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-params/tree/master/examples/beer-finder)): an app with async actions and a mix of local and global state, which finds matching beers for your meal. It reflects the search parameter in the URL query to make it shareable.\n\n## Relation with React Easy State\n\n`params`, `path` and `storage` are Easy State [stores](https://github.com/solkimicreb/react-easy-state#creating-stores). If you use them inside your components, they re-render the component on their mutations - to reflect the changes. On top of this they are also reflected in the corresponding browser API.\n\n## Platform support\n\n- Node: 6 and above\n- Chrome: 49 and above\n- Firefox: 38 and above\n- Safari: 10 and above\n- Edge: 12 and above\n- Opera: 36 and above\n- IE is not supported\n\n*This library is based on non polyfillable ES6 Proxies. Because of this, it will never support IE.*\n\n## Alternative builds\n\nThis library detects if you use ES6 or commonJS modules and serve the right format to you. The exposed bundles are transpiled to ES5 to support common tools - like UglifyJS minifying. If you would like a finer control over the provided build, you can specify them in your imports.\n\n- `react-easy-params/dist/es.es6.js` exposes an ES6 build with ES6 modules.\n- `react-easy-params/dist/es.es5.js` exposes an ES5 build with ES6 modules.\n- `react-easy-params/dist/cjs.es6.js` exposes an ES6 build with commonJS modules.\n- `react-easy-params/dist/cjs.es5.js` exposes an ES5 build with commonJS modules.\n\nIf you use a bundler, set up an alias for `react-easy-params` to point to your desired build. You can learn how to do it with webpack [here](https://webpack.js.org/configuration/resolve/#resolve-alias) and with rollup [here](https://github.com/rollup/rollup-plugin-alias#usage).\n\n## Contributing\n\nContributions are always welcome. Just send a PR against the master branch or open a new issue. Please make sure that the tests and the linter pass and the coverage remains decent. Thanks!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolkimicreb%2Freact-easy-params","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolkimicreb%2Freact-easy-params","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolkimicreb%2Freact-easy-params/lists"}