{"id":20589973,"url":"https://github.com/doist/react-interpolate","last_synced_at":"2026-02-27T15:31:51.400Z","repository":{"id":39238117,"uuid":"252692641","full_name":"Doist/react-interpolate","owner":"Doist","description":"A string interpolation component that formats and interpolates a template string in a safe way.","archived":false,"fork":false,"pushed_at":"2025-02-18T12:26:14.000Z","size":1509,"stargazers_count":16,"open_issues_count":2,"forks_count":2,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-06-28T05:48:06.859Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Doist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2020-04-03T09:50:20.000Z","updated_at":"2025-04-09T10:15:40.000Z","dependencies_parsed_at":"2024-06-18T22:49:55.930Z","dependency_job_id":"2781897f-435f-41bd-8449-f0122e8345b0","html_url":"https://github.com/Doist/react-interpolate","commit_stats":{"total_commits":44,"total_committers":9,"mean_commits":4.888888888888889,"dds":0.7272727272727273,"last_synced_commit":"f5d839d77fc9a22b16ea2dc922b2b01acffa11a4"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/Doist/react-interpolate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Freact-interpolate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Freact-interpolate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Freact-interpolate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Freact-interpolate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Doist","download_url":"https://codeload.github.com/Doist/react-interpolate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Freact-interpolate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263296443,"owners_count":23444489,"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-16T07:33:13.282Z","updated_at":"2026-02-27T15:31:51.355Z","avatar_url":"https://github.com/Doist.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-interpolate\n\n[![size](http://img.badgesize.io/https://cdn.jsdelivr.net/gh/Doist/react-interpolate/dist/react-interpolate.min.cjs?compression=gzip)](http://img.badgesize.io/https://cdn.jsdelivr.net/gh/Doist/react-interpolate/dist/react-interpolate.min.cjs?compression=gzip) [![Actions Status](https://github.com/Doist/react-interpolate/workflows/CI/badge.svg)](https://github.com/Doist/react-interpolate/actions)\n\nA string interpolation component that formats and interpolates a template string in a safe way.\n\n```jsx\nimport Interpolate from '@doist/react-interpolate'\n\nfunction Greeting() {\n    return (\n        \u003cInterpolate\n            string=\"\u003ch1\u003eHello {name}. Here is \u003ca\u003eyour order info\u003c/a\u003e\u003c/h1\u003e\"\n            mapping={{\n                name: 'William',\n                a: \u003ca href=\"https://orderinfo.com\" /\u003e,\n            }}\n        /\u003e\n    )\n}\n```\n\nWould render the following HTML\n\n```html\n\u003ch1\u003eHello William. Here is \u003ca href=\"https://orderinfo.com\"\u003eyour order info\u003c/a\u003e\u003c/h1\u003e\n```\n\n## Component API\n\n`\u003cInterpolate\u003e` component accepts the following props\n\n#### `string`\n\nThe template string to be interpolated. Required.\n\nPlease see the [Interpolation syntax](./#interpolation-syntax) section below for more detail.\n\n#### `mapping`\n\nAn object that defines the values to be injected for placeholder and tags defined in the template string. Optional.\n\n-   For placeholder or self-closing tag, the mapping value could be any valid element value\n-   For open \u0026 close tag, the mapping value could be either renderer function or an element.\n\n```jsx\n\u003cInterpolate\n    string=\"Hello {name}. Here is \u003corderLink\u003eyour order info\u003c/orderLink\u003e\u003chr/\u003e.  \\\n            Please contact \u003csupportLink\u003esupport\u003c/supportLink\u003e for help\"\n    mapping={{\n        // you can map placholder and self-closing tag to any valid element value\n        name: 'William',\n        hr: \u003chr className=\"break\" /\u003e,\n\n        // you can map open \u0026 close tag to a rendering function\n        orderLink: (text) =\u003e \u003ca href=\"https://orderinfo.com\"\u003e{text}\u003c/a\u003e,\n\n        // or you can map open \u0026 close tag to an element\n        supportLink: \u003ca href=\"https://orderinfo.com\" /\u003e,\n    }}\n/\u003e\n```\n\n#### `graceful`\n\nA boolean flag indicates how string syntax error or mapping error should be handled. When true, the raw string value from the prop `string` would be rendered as a fallback in the error scenario. When false, error would be thrown instead.\n\nOptional. `true` by default.\n\n```jsx\n// would render \"an invalid string with unclose tag \u0026lt;h1\u0026gt;\"\n\u003cInterpolate graceful string=\"an invalid string with unclose tag \u003ch1\u003e\" /\u003e\n```\n\n#### `syntax`\n\nOptional. `syntax` props allow use of react-Interpolate with different string formatting syntax. Please see the [\"Custom syntax support\"](#custom-syntax-support) section for more detail.\n\n## Interpolation syntax\n\nHere is interpolation syntax you can use in your `string`.\n\n#### Placeholder\n\n```jsx\n'hello {user_name}'\n```\n\nPlaceholder name should be alphanumeric (`[A-Za-z0-9_]`). Placeholders could be mapped to any valid element value.\n\n#### Open \u0026 close tags\n\n```jsx\n'Here is \u003ca\u003eyour order info\u003c/a\u003e'\n\n// tag name could be any alphanumeric string\n'Here is \u003clink\u003eyour order info\u003c/link\u003e'\n\n// you can nest tag and placeholder\n'Here is \u003ca\u003e\u003cb\u003eyou order info {name}\u003c/b\u003e\u003c/a\u003e'\n```\n\nTag name should be alphanumeric (`[A-Za-z0-9_]`).\n\nOpen \u0026 close tag could be mapped to an element value.\n\n```jsx\n\u003cInterpolate\n    string=\"Here is \u003ca\u003eyour order info\u003c/a\u003e\"\n    mapping={{\n        a: \u003ca href=\"https://orderinfo.com\" /\u003e\n    }}\n/\u003e\n\n\n// Invalid; the mapping value element should not contain children\n\u003cInterpolate\n    string=\"Here is \u003ca\u003eyour order info\u003c/a\u003e\"\n    mapping={{\n        a: (\n            \u003ca href=\"https://orderinfo.com\"\u003e\n                \u003cb /\u003e\n                \u003cbr /\u003e\n            \u003c/a\u003e\n        )\n    }}\n/\u003e\n```\n\nOpen \u0026 close tag could be mapped to a rendering function, which would take a single argument that contains the enclosing text.\n\n```jsx\n\u003cInterpolate\n    string=\"Here is \u003ca\u003eyour order info\u003c/a\u003e\"\n    mapping={{\n        a: (text) =\u003e (\n            \u003ca href=\"https://orderinfo.com\"\u003e\n                \u003cb\u003e{text}\u003c/b\u003e\n                \u003cbr /\u003e\n            \u003c/a\u003e\n        ),\n    }}\n/\u003e\n```\n\nUnclosed tag or incorrect nesting of tag would result in syntax error.\n\n```js\n// bad: no close tag\n'Here is \u003ca\u003eyour order info'\n\n// bad: incorrect tag structure\n'Here is \u003ca\u003e\u003cb\u003eyour order info\u003c/a\u003e\u003c/b\u003e'\n```\n\n#### Self closing tag\n\n```js\n'Hello.\u003cbr/\u003eHere is your order'\n```\n\nTag name should be alphanumeric (`[A-Za-z0-9_]`). Self closing tags could be mapped to any valid element value.\n\n## Auto tag element creation\n\nWhen tags are used the string but there are no correponding mapped value, it would by default create the corresponding HTML element by default.\n\n```jsx\n// would render: \u003ch1\u003eHellow\u003c/h1\u003e\u003cbr/\u003eWorld\n\u003cInterpolate string=\"\u003ch1\u003eHello\u003c/h1\u003e\u003cbr/\u003eworld\" /\u003e\n```\n\n## Custom syntax support\n\nYou may already be using a formatting syntax in your string that is different than the built-in syntax support from Interpolate. You can configure Interpolate so that it could recognize the formatting syntax that you use.\n\nFor instance, you may be using [i18next](https://www.i18next.com/) which has a slightly different placeholder syntax.\n\n```\nhello {{name}}\n```\n\nYou can define the formatting syntax of your string via `syntax` props.\n\n```jsx\nimport Interpolate, { TOKEN_PLACEHOLDER } from \"react-interpolate\"\n\nconst i18nNextSyntax = [\n    {\n        type: TOKEN_PLACEHOLDER,\n        regex: /{{\\s*(\\w+)\\s*}}/g\n    }\n]\n\n// will output \"hi steven\"\n\u003cInterpolate\n    syntax={i18nNextSyntax}\n    string=\"hi {{name}}\"\n    mapping={{\n        name: \"steven\"\n    }}\n/\u003e\n```\n\nreact-interpolate comes with i18next syntax support, and you can enable it via\n\n```jsx\nimport { SYNTAX_I18NEXT } from \"react-interpolate\"\n\n\u003cInterpolate\n  syntax={SYNTAX_I18NEXT}\n  ...\n/\u003e\n```\n\n# Releasing\n\nA new version of @doist/react-interpolate is published both on npm and GitHub Package Registry whenever a new release on GitHub is created.\n\nTo update the version in both `package.json` and `package-lock.json` run:\n\n```sh\nnpm --no-git-tag-version version \u003cmajor|minor|patch\u003e\n```\n\nOnce these changes have been pushed and merged, create a release on GitHub.\n\nA GitHub Action will automatically perform all the necessary steps and will release the version number that's specified inside the `package.json`'s `version` field so make sure that the release tag reflects the version you want to publish.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoist%2Freact-interpolate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoist%2Freact-interpolate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoist%2Freact-interpolate/lists"}