{"id":27381352,"url":"https://github.com/amir2mi/react-link-parser","last_synced_at":"2025-07-21T15:04:29.051Z","repository":{"id":152790409,"uuid":"626349763","full_name":"amir2mi/react-link-parser","owner":"amir2mi","description":"Effortlessly parse text into links, tags, mentions, emails, etc.","archived":false,"fork":false,"pushed_at":"2023-07-20T11:04:27.000Z","size":1643,"stargazers_count":8,"open_issues_count":8,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-19T12:44:26.231Z","etag":null,"topics":["parser","react","react-parser","string-parser","text","text-parser"],"latest_commit_sha":null,"homepage":"https://amir2mi.github.io/react-link-parser","language":"TypeScript","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/amir2mi.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-04-11T09:39:36.000Z","updated_at":"2024-12-03T09:27:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"75a49501-b8f7-4942-bbce-9fc529d6ff77","html_url":"https://github.com/amir2mi/react-link-parser","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/amir2mi/react-link-parser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amir2mi%2Freact-link-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amir2mi%2Freact-link-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amir2mi%2Freact-link-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amir2mi%2Freact-link-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amir2mi","download_url":"https://codeload.github.com/amir2mi/react-link-parser/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amir2mi%2Freact-link-parser/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266324443,"owners_count":23911226,"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","status":"online","status_checked_at":"2025-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["parser","react","react-parser","string-parser","text","text-parser"],"created_at":"2025-04-13T14:56:26.408Z","updated_at":"2025-07-21T15:04:29.036Z","avatar_url":"https://github.com/amir2mi.png","language":"TypeScript","readme":"# React Link Parser\n\n[![npm](https://img.shields.io/npm/dt/react-link-parser.svg?style=flat-square)](https://www.npmjs.com/package/react-link-parser)\n[![npm](https://img.shields.io/npm/v/react-link-parser.svg?style=flat-square)](https://www.npmjs.com/package/react-link-parser)\n[![npm](https://img.shields.io/npm/l/react-link-parser.svg?style=flat-square)](https://github.com/danbovey/react-link-parser/blob/master/LICENSE)\n\nA tiny React component (~1KB) that parses plain text into links, emails or renders elements that **start** or **end** with a specific character or word in the way you want.\n\n## How it works?\n\nIterates over every word in the given string and matches watchers to render it customized with matched watcher render function.\n\n## Install\n\nInstall the `react-link-parser` package with npm or yarn:\n\n```bash\nnpm install react-link-parser\n```\n\n```bash\nyarn add react-link-parser\n```\n\n## Get started\n\nLet's start using the component with a couple of practical examples.\n\n### A simple example\n\nAs a common use case, let's say you want to identify links in your text and render them with your custom render component.  \nThis is the default behavior of the component, so all you need to do is import the package and start using it in your React application.\n\n```jsx\nimport LinkParser from \"react-link-parser\";\n\nexport function App() {\n  return (\n    \u003cLinkParser\u003e\n      I know you will forgive me for it. Were not my other associations so chosen by Fate as to make a heart like mine\n      uneasy? Read more here: https://lorem.ipsum/book\n    \u003c/LinkParser\u003e\n  );\n}\n```\n\n### Parse tags, mentions and more\n\nIn cases where you want to customize how certain words or characters are rendered, you can define a list of watchers that specify which words or characters to target and which function to use for rendering. With this functionality, you can easily create a more personalized parser.\n\n```jsx\nimport LinkParser from \"react-link-parser\";\n\nexport function App() {\n  // a list of watchers\n  const watchers = [\n    {\n      type: \"startsWith\",\n      watchFor: \"#\",\n      render: (tag) =\u003e \u003ca href={`/posts?filterByTag=${tag}`}\u003e{tag}\u003c/a\u003e,\n    },\n    {\n      type: \"startsWith\",\n      watchFor: \"@\",\n      render: (mention) =\u003e \u003ci\u003e{mention}\u003c/i\u003e,\n    },\n    {\n      type: \"endsWith\",\n      watchFor: \"*\",\n      render: (text) =\u003e \u003cspan style={{ color: \"red\" }}\u003e{text}\u003c/span\u003e,\n    },\n    {\n      watchFor: \"link\",\n      render: (url) =\u003e (\n        \u003ca href={url} target=\"_blank\" rel=\"noreferrer noopener nofollow\"\u003e\n          {url}\n        \u003c/a\u003e\n      ),\n    },\n    {\n      watchFor: \"email\",\n      render: (url: string) =\u003e (\n        \u003ca href={`mailto:${url}`} target=\"_blank\" rel=\"noreferrer noopener\"\u003e\n          {url.replace(\"@\", \"[at]\")}\n        \u003c/a\u003e\n      ),\n    },\n  ];\n\n  return (\n    \u003cLinkParser watchers={watchers}\u003e\n      #Far_far_away, behind the word mountains, far from the countries @Vokalia and @Consonantia, there live the blind\n      texts. Separated they live in @Bookmarksgrove right at the coast of the Semantics*, a large language ocean. A\n      small river named Duden flows by their place and supplies it with the necessary regelialia. \\n Credit: \\n\n      https://www.blindtextgenerator.com/lorem-ipsum \\n Contact Me: happy.cactus@mail.me\n    \u003c/LinkParser\u003e\n  );\n}\n```\n\n## Props\n\n| Name             | Required | Type      | Default          | Description                                                                    |\n| :--------------- | :------- | :-------- | :--------------- | :----------------------------------------------------------------------------- |\n| `children`       | Yes      | `Node`    |                  | Only the text will be rendered                                                 |\n| `newLineWatcher` |          | `String`  | `\\\\n`            | If `parseNewLine` is true, what character(s) should be considered as new line. |\n| `parseNewLine`   |          | `Boolean` | `true`           | Whether new line should be parsed as `\u003cbr /\u003e`                                  |\n| `watchers`       |          | `Array`   | link watcher     | An array of [watchers](#parse-tags-mentions-and-more)                          |\n\n### Watcher props\n\n| Name           | Required | Type                          | Default          | Description                                       |\n| :------------- | :------- | :---------------------------- | :--------------- | :------------------------------------------------ |\n| `render`       | Yes      | `Function`                    |  anchor          | A function to customize watcher render            |\n| `type`         |          | `startsWith` or `endsWith`    | `startsWith`     | Where should it watch to find the `watchFor` clue |\n| `watchFor`     | Yes      | `link` or `email` or `String` | `link`           | What to look up in the string                     |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famir2mi%2Freact-link-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famir2mi%2Freact-link-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famir2mi%2Freact-link-parser/lists"}