{"id":18358856,"url":"https://github.com/uppercod/preact-path","last_synced_at":"2025-10-07T00:22:15.866Z","repository":{"id":57155054,"uuid":"146681826","full_name":"UpperCod/preact-path","owner":"UpperCod","description":"This is a small (1.33 kB gzip) group of components that facilitate route management in applications based on Preact.","archived":false,"fork":false,"pushed_at":"2018-09-02T19:07:53.000Z","size":52,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-03-27T01:43:29.625Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://uppercod.github.io/preact-path/demo/","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/UpperCod.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}},"created_at":"2018-08-30T01:59:03.000Z","updated_at":"2020-01-16T19:44:31.000Z","dependencies_parsed_at":"2022-08-26T08:30:52.207Z","dependency_job_id":null,"html_url":"https://github.com/UpperCod/preact-path","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fpreact-path","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fpreact-path/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fpreact-path/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fpreact-path/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UpperCod","download_url":"https://codeload.github.com/UpperCod/preact-path/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247488538,"owners_count":20946957,"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-11-05T22:19:44.555Z","updated_at":"2025-10-07T00:22:15.794Z","avatar_url":"https://github.com/UpperCod.png","language":"JavaScript","readme":"# Preact-path\n\nThis is a small (1.33 kB gzip) group of components that facilitate route management in applications based on **Preact**.\n\n\u003e This component creates a context that does not depend on the route events **popState** or **hashChange**, If you want to transmit the **Provider** changes to the browser path use the ** History ** property to hear those changes.\n\n## Why react-path?\n\nUnlike other routers, preact-path allows to componentize the route without knowing the general context, similar to how a relative directory operates, this is achieved through the `\u003cRoot/\u003e` component, this allows defining a scope for the components that this contain ** Root ** can also inherit range from another **Root**.\n\n``` js\n\u003cProvider capture={true}\u003e\n   \u003cRoot path=\"/folder-a\"\u003e\n       \u003cdiv\u003e\n           \u003cRoot path=\"/folder-b\"\u003e\n               \u003ca href=\"/1\"\u003e Open folder 1 \u003c/a\u003e\n               \u003ca href=\"/2\"\u003e Open folder 2 \u003c/a\u003e\n               \u003ca href=\"../\"\u003e Open folder c \u003c/a\u003e\n           \u003c/Root\u003e\n           \u003cRoot path=\"/folder-c\"\u003e\n               \u003ca href=\"/1\"\u003e Open folder 1 \u003c/a\u003e\n               \u003ca href=\"/2\"\u003e Open folder 2 \u003c/a\u003e\n               \u003ca href=\"../\"\u003e Open folder b \u003c/a\u003e\n           \u003c/Root\u003e\n       \u003c/div\u003e\n   \u003c/Root\u003e\n\u003c/Provider\u003e\n```\n\n\u003e The previous example only shows how internal contexts are created to limit the scope of the links associated with the `Root` component.\n\n## Route expressions\n\n**Preact-path** makes use of the library [**path-path**](https://github.com/uppercod/path-path), this transforms the route expressions to a regular expression, with it is able to capture the parameters associated with the route.\n\n### Parameter `/:param`\n\nBy means of the expression `/:\u003cname_param\u003e`, you can capture a parameter of the route, this is strict before the existence of this parameter.\n\n### Optional parameter `/:param?`\n\nBy means of the expression `/:\u003cname_param\u003e?`, You can capture a parameter of the route, this is optional before the existence of this parameter.\n\n### Optional and unlimited parameter `/:param...`\n\nBy means of the expression `/:\u003cname_param\u003e...`, you can capture a parameter of the route, this is optional before the existence of this parameter, it also ends the route expression, since it captures everything that goes with it.\n\n### Comodin `/**`\n\nby means of the expression `/**`, you give permission for any route parameter to enter whenever it exists.\n\n## Component `\u003cProvider/\u003e`\n\nThis allows you to create a context that will be shared by all the components associated with it.\n\n```js\nimport {Provider } from \"preact-path\";\nimport App from \"./app\";\n\nrender(\n   \u003cProvider\u003e\n       \u003cApp/\u003e\n   \u003c/Provider\u003e,\n   document.querySelector(\"#app\")\n)\n```\n\n### Propiedades\n\n| Property | Type | Required | Default | Description |\n|:---------|:-----|:---------|:--------|:------------|\n| capture | Boolean | false | -- | Allows you to capture the click events |\n| history | function | false | -- | Allows access to the provider object that controls the status of the route |\n| redirect | function | false | -- | It allows to capture the redirection and modify the redirections | \n\n\n## Component `\u003cSwitch/\u003e`\n\nThis allows to define which child associated to the component will be printed before the change of route.\n\n\n```js\nimport {Provider,Switch } from \"preact-path\";\n\nrender(\n   \u003cProvider\u003e\n       \u003cSwitch\u003e\n           \u003ch1 path=\"/\"\u003eRoute /\u003c/h1\u003e  \n           \u003ch1 path=\"/:param\"\u003eRoute /:param\u003c/h1\u003e \n           \u003ch1 path=\"/fixed/:paramOptional?\"\u003eRoute /fixed/:paramOptional?\u003c/h1\u003e \n           \u003ch1 path=\"/fixed/fixed/:paramInfinite...\"\u003eRoute /fixed/fixed/:paramInfinite...\u003c/h1\u003e \n           \u003ch1 default\u003eRoute /:default...\u003c/h1\u003e \n       \u003c/Switch\u003e\n   \u003c/Provider\u003e,\n   document.querySelector(\"#app\")\n)\n```\n\n### Properties\n\nEstas propiedades solo se definen a los niños del componente.\n\n|Propiedad|Tipo|Requerido|Default|Descripción|\n|:--------|:---|:--------|:------|:----------|\n| path | string | true | -- | Permite definir si este hijo será impreso al realizar la comparación con la ruta actual |\n| default | boolean | true | -- | Este debe ser asignado al último componente de la lista de hijos, permite impreso en el caso de que ningún otro lo haya sido |\n\n\n## Component `\u003cRoot/\u003e` \n\nThis component allows defining a route scope for the child.\n\n```js\nimport {Provider,Switch,Root } from \"preact-path\";\n\nrender(\n   \u003cProvider\u003e\n       \u003cRoot path=\"/folder\"\u003e\n           \u003cSwitch\u003e\n               \u003ch1 path=\"/\"\u003eRoute /folder\u003c/h1\u003e  \n               \u003ch1 path=\"/:param\"\u003eRoute /folder/:param\u003c/h1\u003e \n               \u003ch1 path=\"/fixed/:paramOptional?\"\u003eRoute /folder/fixed/:paramOptional?\u003c/h1\u003e \n               \u003ch1 path=\"/fixed/fixed/:paramInfinite...\"\u003eRoute /folder/fixed/fixed/:paramInfinite...\u003c/h1\u003e\n               \u003ch1 default\u003eRoute /folder/:default...\u003c/h1\u003e \n           \u003c/Switch\u003e\n       \u003c/Root\u003e   \n   \u003c/Provider\u003e,\n   document.querySelector(\"#app\")\n)\n```\n\n\u003e The `Root` component generates a context that inherits the property **path** from the parent.\n\n### Properties\n\n|Propiedad|Tipo|Requerido|Default|Descripción|\n|:--------|:---|:--------|:------|:----------|\n| path | string | true | -- | It allows to define if this child will be printed when making the comparison with the current route |\n\n## Componente `\u003cRoute/\u003e`\n\nThis component allows you to print the child only if the comparison matches.\n\n```js\nimport {Provider,Route } from \"preact-path\";\n\nrender(\n   \u003cProvider\u003e\n        \u003cRoute path=\"/:param\"\u003e\n           {(params,redirect)=\u003e\u003ch1\u003eRoute\u003c/h1\u003e}\n        \u003c/Route\u003e \n   \u003c/Provider\u003e,\n   document.querySelector(\"#app\")\n)\n```\n\n### Properties\n\n|Propiedad|Tipo|Requerido|Default|Descripción|\n|:--------|:---|:--------|:------|:----------|\n| path | string | true | -- | It allows to define if this child will be printed when making the comparison with the current route |\n\n\n\n## Component `\u003cSubscriber/\u003e` \n\nThis component allows you to subscribe to all the changes that the `Provider` component sends.\n\n```js\nimport {Provider,Subscriber } from \"preact-path\";\n\nrender(\n   \u003cProvider\u003e\n        \u003cSubscriber\u003e\n           {(path,redirect)=\u003e\u003ch1\u003eRoute : {path}\u003c/h1\u003e}\n        \u003c/Subscriber\u003e \n   \u003c/Provider\u003e,\n   document.querySelector(\"#app\")\n)\n```\n\n## Component `\u003cMatch/\u003e`\n\nThis component is of a static nature, it only generates a comparison between **match** and **path**\n\n```js\nimport {Provider,Match } from \"preact-path\";\n\nrender(\n   \u003cProvider\u003e\n        \u003cMatch match=\"/:param\" path=\"/mi-ruta\"\u003e\n           {(path,redirect)=\u003e\u003ch1\u003eRoute : {path}\u003c/h1\u003e}\n        \u003c/Match\u003e \n   \u003c/Provider\u003e,\n   document.querySelector(\"#app\")\n)\n```\n\n### Propiedades\n\n|Propiedad|Tipo|Requerido|Default|Descripción|\n|:--------|:---|:--------|:------|:----------|\n| match | string | true | -- | Es la expresión a comparar, de coincidir imprimirá el hijo asociado al componente |\n| path | string | true | -- | Ruta a comparar |","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Fpreact-path","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuppercod%2Fpreact-path","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Fpreact-path/lists"}