{"id":16124042,"url":"https://github.com/itaditya/external-link-react","last_synced_at":"2025-03-18T12:31:36.893Z","repository":{"id":41703414,"uuid":"243651294","full_name":"itaditya/external-link-react","owner":"itaditya","description":"Inform users when they visit external link","archived":false,"fork":false,"pushed_at":"2023-01-05T08:32:04.000Z","size":4013,"stargazers_count":4,"open_issues_count":25,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-28T09:20:59.945Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/detect-external-links-79jkf","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/itaditya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-28T01:14:42.000Z","updated_at":"2023-03-04T05:42:56.000Z","dependencies_parsed_at":"2023-02-03T20:47:11.635Z","dependency_job_id":null,"html_url":"https://github.com/itaditya/external-link-react","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/itaditya%2Fexternal-link-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Fexternal-link-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Fexternal-link-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Fexternal-link-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itaditya","download_url":"https://codeload.github.com/itaditya/external-link-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243926063,"owners_count":20369911,"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-09T21:19:33.705Z","updated_at":"2025-03-18T12:31:36.421Z","avatar_url":"https://github.com/itaditya.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## External Link React\n\nIf your website has a comment section, a hacker might post exploitive links there so that users might open the link thinking it is part of your website. You should inform the users that they are about to leave your website and step into an external page. This React hook lets you do it pretty quickly. You just have to plug it in your UI.\n\n[Try it online](https://codesandbox.io/s/detect-external-links-79jkf)\n\n### Usage\n\n```js\nimport { useExternalLink } from 'external-link-react';\n\nfunction App() {\n  const { handleLinkOpen, handleConfirm } = useExternalLink(handleAskUser);\n\n  function handleAskUser() {\n    // we're using browser's native confirm but you can use your own UI.\n    const userResponse = window.confirm('This is an external link');\n    handleConfirm(userResponse);\n  }\n\n  return (\n    \u003cdiv onClick={handleLinkOpen}\u003e\n      \u003ca href=\"https://google.com\"\u003eGoogle (external)\u003c/a\u003e\n      \u003ca href=\"http://localhost:3000/\"\u003eOur App (internal)\u003c/a\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Installation\n\n```\nnpm i external-link-react\n```\n\n### Options\n\nYou can pass options to the useExternalLink React hook as a second argument. It has to be an object containing or more of these key-value pairs.\n\n```js\nconst options = {\n  newTab: false,\n  debug: false,\n};\n\n// inside component\nconst { handleLinkOpen, handleConfirm } = useExternalLink(handleAskUser, options);\n```\n\n1. **newTab**- By default link opens in the same tab. If you want the link to open in a separate tab then you can pass `newTab: true`. `noopener` is set on the link so that your website remains secure against phishing attacks.\n1. **debug**- To enable helpful console messages you can pass `debug: true`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitaditya%2Fexternal-link-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitaditya%2Fexternal-link-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitaditya%2Fexternal-link-react/lists"}