{"id":27477122,"url":"https://github.com/potty/react-anchorme","last_synced_at":"2025-04-16T08:04:57.109Z","repository":{"id":42859503,"uuid":"259991122","full_name":"potty/react-anchorme","owner":"potty","description":"⚓️ React component using Anchorme.js to detect urls and emails in a text and converts them into clickable HTML links.","archived":false,"fork":false,"pushed_at":"2023-12-01T03:51:29.000Z","size":514,"stargazers_count":55,"open_issues_count":5,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-26T15:04:48.441Z","etag":null,"topics":["links","react","typescript"],"latest_commit_sha":null,"homepage":"","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/potty.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-29T17:13:20.000Z","updated_at":"2024-06-18T16:55:59.850Z","dependencies_parsed_at":"2024-06-18T16:55:52.734Z","dependency_job_id":"c3ed3f5e-5abd-4328-95fc-66e19fafe25e","html_url":"https://github.com/potty/react-anchorme","commit_stats":{"total_commits":40,"total_committers":2,"mean_commits":20.0,"dds":"0.025000000000000022","last_synced_commit":"311d94b842c4f067ed660c74dc13b300ab5fa25d"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potty%2Freact-anchorme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potty%2Freact-anchorme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potty%2Freact-anchorme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potty%2Freact-anchorme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/potty","download_url":"https://codeload.github.com/potty/react-anchorme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249216332,"owners_count":21231590,"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":["links","react","typescript"],"created_at":"2025-04-16T08:04:55.978Z","updated_at":"2025-04-16T08:04:57.103Z","avatar_url":"https://github.com/potty.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-anchorme\n  \n![](https://github.com/potty/react-anchorme/workflows/Tests/badge.svg) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-anchorme)](https://bundlephobia.com/result?p=react-anchorme) ![npm](https://img.shields.io/npm/dm/react-anchorme)\n\nReact component using [Anchorme.js](https://github.com/alexcorvi/anchorme.js) to detect urls and emails in a text and converts them into clickable HTML links.\n\n## 🚀 Installation\n\n```bash\n# npm\nnpm i react-anchorme\n\n# Yarn\nyarn add react-anchorme\n\n# pnpm\npnpm add react-anchorme\n```\n\n## 🖲 Usage\n\n### Basic usage\n\nComponent takes string as a children, detects urls, emails, IP addresses in it and replaces them with clickable HTML links.\n\n```jsx static\nimport React from 'react'\nimport { Anchorme } from 'react-anchorme'\n\nconst SomeComponent = () =\u003e {\n  return (\n    \u003cAnchorme\u003eLorem ipsum http://example.loc dolor sit amet\u003c/Anchorme\u003e\n  )\n}\n```\n\n### Custom props\n\nYou can set custom anchor props that are applied to every link created by the component.\n\n```jsx static\nimport React from 'react'\nimport { Anchorme } from 'react-anchorme'\n\nconst SomeComponent = () =\u003e {\n  return (\n    \u003cAnchorme target=\"_blank\" rel=\"noreferrer noopener\"\u003e\n        Lorem ipsum http://example.loc dolor sit amet\n    \u003c/Anchorme\u003e\n  )\n}\n```\n\n### Truncate\n\nYou can truncate link text by setting up `truncate` prop:\n\n```jsx static\nimport React from 'react'\nimport { Anchorme } from 'react-anchorme'\n\nconst SomeComponent = () =\u003e {\n  return (\n    \u003cAnchorme truncate={5}\u003e\n        Lorem ipsum example.com dolor sit amet\n    \u003c/Anchorme\u003e\n  )\n}\n```\n\n### Custom link component\n\nYou can set custom link component that is rendered instead of default anchor element.\n\n```jsx static\nimport React from 'react'\nimport { Anchorme, LinkComponentProps } from 'react-anchorme'\n\nconst CustomLink = (props: LinkComponentProps) =\u003e {\n  return (\n    \u003ci\u003e\n      \u003ca {...props} /\u003e\n    \u003c/i\u003e\n  )\n}\n\nconst SomeComponent = () =\u003e {\n  return (\n    \u003cAnchorme linkComponent={CustomLink} target=\"_blank\" rel=\"noreferrer noopener\"\u003e\n        Lorem ipsum http://example.loc dolor sit amet\n    \u003c/Anchorme\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpotty%2Freact-anchorme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpotty%2Freact-anchorme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpotty%2Freact-anchorme/lists"}