{"id":15882258,"url":"https://github.com/ph1p/zeit-integration-router","last_synced_at":"2026-02-23T19:46:17.622Z","repository":{"id":48007146,"uuid":"190083448","full_name":"ph1p/zeit-integration-router","owner":"ph1p","description":"A router for zeit applications","archived":false,"fork":false,"pushed_at":"2021-08-11T02:17:31.000Z","size":833,"stargazers_count":3,"open_issues_count":5,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T00:12:42.381Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://zeit-integration-router.now.sh","language":"TypeScript","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/ph1p.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":"2019-06-03T21:16:31.000Z","updated_at":"2019-07-30T22:22:16.000Z","dependencies_parsed_at":"2022-08-12T16:21:28.101Z","dependency_job_id":null,"html_url":"https://github.com/ph1p/zeit-integration-router","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ph1p%2Fzeit-integration-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ph1p%2Fzeit-integration-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ph1p%2Fzeit-integration-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ph1p%2Fzeit-integration-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ph1p","download_url":"https://codeload.github.com/ph1p/zeit-integration-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243864629,"owners_count":20360356,"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":[],"created_at":"2024-10-06T04:02:16.401Z","updated_at":"2026-02-23T19:46:12.563Z","avatar_url":"https://github.com/ph1p.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# zeit-integration-router\n\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/zeit/awesome-zeit-integrations) [![npm version](https://badge.fury.io/js/zeit-router.svg)](https://badge.fury.io/js/zeit-router)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/kapture.gif\"\u003e\n\u003c/p\u003e\n\n## What is this?\n\nThis is a small router concept for zeit integrations. It supports the basic functionality of a router and some extras like parameters.\n\n**DEMO**: [https://zeit.co/integrations/integration-router](https://zeit.co/integrations/integration-router)\n**Example**: go to `src/example`\n\n## How to?\n\nThe only package you need is `zeit-router`. Install and import it at the top of your entrypoint.\n\n```bash\nnpm i zeit-router\n# or\nyarn add zeit-router\n```\n\nCreate an instance:\n\n```javascript\nimport { ZeitRouter } from 'zeit-router';\n\n// with optinal start route (default: '/')\nconst app = new ZeitRouter('/');\n```\n\n**Note**: The current route is saved to `currentPath` inside `metadata`, so do not overwrite it.\n\n`libs/router.ts` returns a class. The class has 2 Methods.\n\n### add(path, cb, silent)\n\nThis method adds a route. You can define the path like you do in `express` or other frameworks.\nThe callback function gives you `handler(zeitClient, payload)`, `router` and `params`. You have to return a `htm` method.\n`silent`(default: false): If this parameter is set to `true`, this page will not be rendered again after a reload and the previous page will be displayed instead.\nThis is a useful flag for confirmation fields.\n\n```javascript\napp.add('/:id', ({ handler, router, params }) =\u003e {\n  return htm`\u003cBox\u003e\n    \u003cB\u003e${params.id}\u003c/B\u003e\n  \u003c/Box\u003e`;\n});\n```\n\n### uiHook(handler, router)\n\nThis methods wraps `withUiHook` and adds an additional `router`-object to the callback function.\n\n```javascript\nexport default app.uiHook(async (handler: HandlerOptions, router: Router) =\u003e {\n  return htm`\u003cPage\u003e${router.currentPath}\u003c/Page\u003e`;\n});\n```\n\n---\n\n## `router`-object\n\n#### async navigate(path)\n\n- Navigate through a specific route. Works only inside the `app.uiHook`.\n\n#### currentRoute\n\n- Shows the current route. Returns a promise.\n\n#### previousRoute\n\n- Shows the previous route. Returns a promise.\n\n#### renderRoute(path)\n\n- Renders a specific route.\n\n\n## Routing\n\nAll `actions` which start with a `/`, will automatically navigate trough a matching route.\nYou can also navigate with the `router.navigate` method.\n\n\n## Full Example:\n\n```javascript\nimport { ZeitRouter } from 'zeit-router';\nimport { HandlerOptions, Router } from '../types';\n\nconst app = new ZeitRouter('/');\n\napp.add('/', () =\u003e {\n  return htm`\u003cBox\u003e\n    \u003cB\u003ehome\u003c/B\u003e\n  \u003c/Box\u003e`;\n});\n\napp.add('/parameter/:id', ({ params }) =\u003e {\n  return htm`\u003cBox\u003e\n    \u003cB\u003e${params.id}\u003c/B\u003e\n  \u003c/Box\u003e`;\n});\n\nconst uiHook = app.uiHook(async (handler: HandlerOptions, router: Router) =\u003e {\n  const {\n    payload: { action }\n  } = handler;\n\n  if (action === 'home') {\n    await router.navigate('/');\n  }\n\n  return htm`\u003cPage\u003e\n    \u003cButton action=\"home\" small highlight\u003ehome\u003c/Button\u003e\n    \u003cButton action=\"/parameter/123\" small highlight\u003eparameter\u003c/Button\u003e\n    \u003cButton action=\"fail\" small warning\u003efail\u003c/Button\u003e\n\n    ${await router.currentRoute}\n\n    Your are here: \u003cB\u003e${router.currentPath}\u003c/B\u003e\n  \u003c/Page\u003e`;\n});\n```\n\n## Development\n\n1. clone this repository\n2. install the [now cli](https://github.com/zeit/now-cli)\n3. run following commands:\n\n```bash\nyarn install \u0026\u0026 yarn now:dev\n```\n\nor\n\n```bash\nnpm install \u0026\u0026 npm run now:dev\n```\n\n4. The server starts on port **5005**\n\n[More information](https://zeit.co/docs/integrations/#creating-an-integration/step-2-creating-a-uihook/running-the-uihook-locally)\n\nYou can also use `yarn dev` or `npm run dev`. This command will start a dev server which supports autoreloading on file change. (You need to install `nodemon`)\n\n\n## Used by:\n\n* Secrets [https://zeit.co/integrations/secrets](https://zeit.co/integrations/secrets)\n  * Psst, it is also open source [https://github.com/ph1p/zeit-secrets-integration](https://github.com/ph1p/zeit-secrets-integration)\n\n\n## Contribute\n\nFeel free to add PRs or open Issues (:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fph1p%2Fzeit-integration-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fph1p%2Fzeit-integration-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fph1p%2Fzeit-integration-router/lists"}