{"id":22505695,"url":"https://github.com/mageddo/react-push-state","last_synced_at":"2025-08-11T00:17:09.456Z","repository":{"id":150166140,"uuid":"109990264","full_name":"mageddo/react-push-state","owner":"mageddo","description":null,"archived":false,"fork":false,"pushed_at":"2017-11-08T21:37:31.000Z","size":27,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T23:30:21.561Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mageddo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-11-08T15:00:02.000Z","updated_at":"2017-11-08T15:41:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"ff733d8c-33b7-4caf-8bd0-f2ec529b3bce","html_url":"https://github.com/mageddo/react-push-state","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mageddo/react-push-state","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mageddo%2Freact-push-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mageddo%2Freact-push-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mageddo%2Freact-push-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mageddo%2Freact-push-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mageddo","download_url":"https://codeload.github.com/mageddo/react-push-state/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mageddo%2Freact-push-state/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269810132,"owners_count":24478700,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-07T00:31:13.676Z","updated_at":"2025-08-11T00:17:09.427Z","avatar_url":"https://github.com/mageddo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Building the lib\n\n```bash\ndocker-compose up -d --force-recreate rps-compiler \u0026\u0026\\\ndocker exec -it rps-compiler sh -c 'npm install \u0026\u0026 npm run build' \u0026\u0026\\\ndocker-compose stop rps-compiler\n```\n\nIt will generate the transpiled javascript at build folder\n\n### Examples\n#### State callback\n\n```javascript\nRouter.register(this, {\n\t'/': (state) =\u003e {\n\n\t},\n\t'404': (state) =\u003e {\n\t\tconsole.debug('called when match was not found');\n\t}\n});\n```\n\n#### State contract \n\n```javascript\n{\n\ttitle: '', // page  title\n\tpath: '', // push state path\n\tpage: null, // page to be render when pushstate is false in Link tag\n\tpathVar: [1, 'b'], // group values in path \n\tquery:  URLSearchParams // query string object\n}\n```\n\n#### Link\n\nIf you just want to transitate from a page to another without use pushstate\n\n```html\n\u003cLink pushstate=\"false\" page={\u003cp\u003ewhat you want to render?\u003c/p\u003e} href=\"/some/path\" \u003eSome link\u003c/Link\u003e\n```\n\nUsing pushstate\n```html\n\u003cLink href=\"/some/path\" \u003eSome link\u003c/Link\u003e\n```\n\n\n#### Creating a page that loads the post information and have a permanent link to be acessed anywhere\n\n```javascript\n\nimport React from 'react';\nimport Router, {Link} from \"./route/Router.js\"\n\nclass App extends React.Component {\n\n\tconstructor(){\n\t\tsuper();\n\t\tthis.state = {}\n\t\tRouter.register(this, {\n\t\t\t'^/posts/(\\\\d+)' : (state) =\u003e {\n\t\t\t\tthis.setState({page: \u003cp\u003e{state.pathVar[0]}\u003c/p\u003e});\n\t\t\t}\n\t\t})\n\t}\n\n\tcomponentDidMount(){\n\t\tRouter.start(); // load the state at page load\n\t}\n\n\trender(){\n\t\treturn (\n\t\t\u003cdiv className=\"container\"\u003e\n\t\t\t\u003cLink title=\"Home\" href=\"/posts/1/\" \u003ePost 1\u003c/Link\u003e\n\t\t\t\u003cdiv style={{background: \"#F2F2F2\", minHeight: 100, marginTop: 20}}\u003e\n\t\t\t\t{this.state.page}\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\t)\n\t}\n}\n```\n\n#### Page that just load another page without change URL and lost the state when page reloads\n\n```javascript\n\nimport React from 'react';\nimport Router, {Link} from \"./route/Router.js\"\n\nclass App extends React.Component {\n\n\tconstructor(){\n\t\tsuper();\n\t\tthis.state = {};\n\t\tRouter.register(this, {});\n\t}\n\n\t/**\n\t * This method will be called when a Link without pushState was clicked, then you will receive in state.page a page to render\n\t */ \n\tload(state){\n\t\tconsole.debug('m=App.load, state=%o', state);\n\t\tthis.setState({page: state.page});\n\t}\n\n\tcomponentDidMount(){\n\t\tRouter.start(); // load the state at page load\n\t}\n\n\trender(){\n\t\treturn (\n\t\t\u003cdiv className=\"container\"\u003e\n\t\t\t\u003cLink title=\"Home\" href=\"/posts/1/\" \u003ePost 1\u003c/Link\u003e\n\t\t\t\u003cLink pushstate=\"false\" page={\u003cp\u003e{JSON.stringify(v)}\u003c/p\u003e} href={\"/users/\" + v.name.toLowerCase()} \u003e{v.name}\u003c/Link\u003e\n\t\t\t\u003cdiv style={{background: \"#F2F2F2\", minHeight: 100, marginTop: 20}}\u003e\n\t\t\t\t{this.state.page}\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\t)\n\t}\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmageddo%2Freact-push-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmageddo%2Freact-push-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmageddo%2Freact-push-state/lists"}