{"id":18412701,"url":"https://github.com/platzidev/react-url","last_synced_at":"2025-04-07T11:32:14.500Z","repository":{"id":57347040,"uuid":"57321933","full_name":"PlatziDev/react-url","owner":"PlatziDev","description":"A React.js High-Order Component and decorator for parsing and resolving URLs inside your application.","archived":false,"fork":false,"pushed_at":"2016-08-10T02:57:38.000Z","size":10,"stargazers_count":48,"open_issues_count":0,"forks_count":3,"subscribers_count":55,"default_branch":"master","last_synced_at":"2025-03-22T17:11:29.384Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PlatziDev.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":"2016-04-28T17:38:37.000Z","updated_at":"2023-08-15T16:41:07.000Z","dependencies_parsed_at":"2022-09-17T22:50:31.403Z","dependency_job_id":null,"html_url":"https://github.com/PlatziDev/react-url","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/PlatziDev%2Freact-url","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlatziDev%2Freact-url/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlatziDev%2Freact-url/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlatziDev%2Freact-url/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PlatziDev","download_url":"https://codeload.github.com/PlatziDev/react-url/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247644533,"owners_count":20972306,"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-06T03:43:11.189Z","updated_at":"2025-04-07T11:32:11.105Z","avatar_url":"https://github.com/PlatziDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-url\nA React.js High-Order Component and decorator for parsing and resolving URLs inside your application.\n\n## Installation\n```bash\nnpm i -S react react-url\n```\n\n## API\n### URLProvider\n```javascript\nimport { render } from 'react-dom';\nimport { URLProvider } from 'react-url';\n\nimport App from './containers/App';\n\nconst urls = {\n  profile: '/profile/:username/',\n};\n\nrender(\n  \u003cURLProvider urls={urls}\u003e\n    \u003cApp /\u003e\n  \u003c/URLProvider\u003e,\n  document.body,\n);\n```\n* `URLProvider` is a High-Order Component.\n* `URLProvider` expect only one property named `urls`.\n* `urls` should be an object where the keys are the URLs names and the values are the unparsed url using the syntax of Express.js.\n\n### connectURL\n```javascript\nimport React, { Component } from 'react';\nimport { connectURL } from 'react-url';\n\nfunction mapURLToProps(getURL, props) {\n  return {\n    profileURL: getURL('profile', { username: props.username }),\n  };\n}\n\n@connectURL(mapURLToProps)\nclass UserData extends Component { ... }\n\nexport default UserData;\n```\n* The `connectURL` argument (`mapURLToProps`) it's optional.\n* If you don't supply it then it will add the `getURL` function as a property.\n* The `mapURLToProps` function will receive the `getURL` function and `props` object as parameter and should return an object.\n* The `getURL` function receive the URL name and an object with the parameters to use in it and return the parsed URL.\n* You can use it as a decorator (like the example above) or just as a function and send them the component to connect.\n\n### parser\n```javascript\nimport { parser } from 'react-url';\n\nconst urls = {\n  profile: '/profile/:username/',\n};\n\nconst profileURL = parser(urls, 'profile', {\n  username: 'sergiodxa',\n});\n```\n* This is a Low-Level API and is used internally for the `connectURL` decorator, it's not expected that you use it directly.\n* `parser` receive as arguments the `urls` map, the URL name and the options/parameters object.\n* It will return the final parsed url string.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplatzidev%2Freact-url","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplatzidev%2Freact-url","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplatzidev%2Freact-url/lists"}