{"id":11873,"library":"react-string-replace","title":"React String Replace","description":"react-string-replace is a lightweight JavaScript utility designed to safely replace substrings or regular expression matches within a given string or array, converting them into an array containing React components and strings. It is currently at stable version 2.0.1 and has seen active development, with recent tooling modernizations and breaking changes in major versions. The library's core differentiator is its ability to perform replacements suitable for React's rendering model without relying on `dangerouslySetInnerHTML`, thus maintaining React's built-in XSS protection. It offers a simple API for common tasks like highlighting text, converting URLs, or parsing mentions, and supports chaining for multiple replacement patterns. It has zero runtime dependencies and ships with TypeScript types, making it suitable for modern React applications.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/iansinnott/react-string-replace","tags":["javascript","react","string","replace","typescript"],"install":[{"cmd":"npm install react-string-replace","lang":"bash","label":"npm"},{"cmd":"yarn add react-string-replace","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-string-replace","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While CommonJS `require` is technically supported, ESM `import` is the idiomatic and recommended way for modern React applications. The library also ships TypeScript types for enhanced developer experience.","wrong":"const reactStringReplace = require('react-string-replace');","symbol":"reactStringReplace","correct":"import reactStringReplace from 'react-string-replace';"}],"quickstart":{"code":"import reactStringReplace from 'react-string-replace';\nimport React from 'react';\n\nfunction ProcessedContent() {\n  const text = \"Hey @ian_sinn, check out this link https://github.com/iansinnott/ Hope to see you at #reactconf\";\n  let replacedText;\n\n  // Match URLs\n  replacedText = reactStringReplace(text, /(https?:\\/\\/\\S+)/g, (match, i) => (\n    <a key={match + i} href={match} target=\"_blank\" rel=\"noopener noreferrer\">\n      {match}\n    </a>\n  ));\n\n  // Match @-mentions\n  replacedText = reactStringReplace(replacedText, /@(\\w+)/g, (match, i) => (\n    <a key={match + i} href={`https://twitter.com/${match}`} target=\"_blank\" rel=\"noopener noreferrer\">\n      @{match}\n    </a>\n  ));\n\n  // Match hashtags\n  replacedText = reactStringReplace(replacedText, /#(\\w+)/g, (match, i) => (\n    <a key={match + i} href={`https://twitter.com/hashtag/${match}`} target=\"_blank\" rel=\"noopener noreferrer\">\n      #{match}\n    </a>\n  ));\n\n  return <div>{replacedText}</div>;\n}\n\n// To use, render <ProcessedContent /> within a React component tree.\n// For example:\n// ReactDOM.render(<ProcessedContent />, document.getElementById('root'));","lang":"typescript","description":"Demonstrates how to perform multiple chained string replacements on a single text string, transforming URLs, @-mentions, and hashtags into clickable React `<a>` elements, suitable for rendering within a React component."},"warnings":[{"fix":"Review and update any custom logic that relies on the `index` parameter within your replacement functions. Assume 0-based indexing for matches and adjust calculations accordingly if migrating from v1.x.","message":"The `index` parameter provided to the replacement callback function changed its behavior in v2.0.0. It now represents the logical match index (0, 1, 2...) instead of the internal array index (1, 3, 5...) used in v1.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure your regular expression pattern has at least one capturing group. For instance, to match 'foo', use `/(foo)/g`.","message":"When using a `RegExp` for the `match` parameter, you **must** include at least one capturing group (e.g., `/(word)/g` instead of `/word/g`). Failing to do so can lead to unexpected behavior or incorrect replacements, as the library relies on capture groups for splitting.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Organize your `reactStringReplace` calls sequentially, assigning the result of each call to a variable and using that variable as the input for the subsequent replacement. Refer to the quickstart example for a demonstration of chaining replacements.","message":"To apply multiple distinct string replacement rules to the same content, you must chain calls to `reactStringReplace`. Pass the output array (which contains strings and React elements) from one call as the input `string` parameter to the next call.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Be aware that the function operates only on string segments when given an array input. If you need to process non-string elements, pre-process the array to convert them to strings or handle them separately before passing them to `reactStringReplace`.","message":"When the `string` parameter is an array, `reactStringReplace` will only process and apply replacements to the string elements within that array. Any non-string elements (e.g., existing React components, numbers, null) will be left untouched and returned as-is in the output array.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"This specific issue was largely addressed in `v1.1.0`. Ensure you are using `react-string-replace` `v1.1.0` or newer. If the problem persists, carefully review your regular expression for edge cases that might yield `undefined` in split results, or simplify the regex if possible to avoid ambiguous matches.","cause":"This error typically occurs when a regular expression, due to complex patterns or multiple matching groups, results in `undefined` elements being generated by the internal `String.prototype.split` operation, which the library then attempts to process as a string.","error":"TypeError: Cannot read properties of undefined (reading 'split') OR TypeError: undefined is not an object (evaluating 'e.split')"},{"fix":"Upgrade to `react-string-replace` v2.0.0 or higher to utilize the more intuitive 0-based logical index. If upgrading is not an immediate option, you will need to adjust your logic to account for the older `index` numbering scheme (e.g., `(index - 1) / 2` to derive a 0-based logical index from the v1.x behavior).","cause":"This behavior indicates that you are likely using `react-string-replace` v1.x or an older version, where the `index` parameter was an internal array index, not a logical match count.","error":"Replacement callback `index` parameter gives unexpected values (e.g., 1, 3, 5 instead of 0, 1, 2)"}],"ecosystem":"npm"}